Comment centrer la zone HTML

Il existe de nombreuses façons de centrer les boîtes HTML : centrage horizontal : définissez des marges gauche et droite égales ou utilisez text-align : center. Centré verticalement : définissez des marges supérieure et inférieure égales ou utilisez les propriétés position : absolue + haut/bas. Centrage horizontal et vertical : implémenté à l'aide de classes flexbox, grid ou CSS.

Comment centrer une boîte HTML

Il existe plusieurs façons de centrer une boîte en HTML, selon le centrage souhaité et la technique de mise en page que vous utilisez.

Centrez horizontalement

• Utilisez l'attribut margin : margin 属性：在盒子的左右两侧设置相等的 margin 值，使其从容器的边缘居中。
• 使用 text-align 属性：将盒子容器的 text-align 设置为 "center"，然后将盒子设置为 inline-block 或 block 元素。

垂直居中

• 使用 margin-top 和 margin-bottom 属性：在盒子的顶部和底部设置相等的 margin 值，使其从容器的上边缘和下边缘居中。
• 使用 position 属性：将盒子的 position 设置为 "absolute"，然后使用 top 和 bottom 属性使其在垂直方向上居中。

水平和垂直居中

• 使用 flexbox：创建具有 display: flex 属性的容器，然后使用 align-items 和 justify-content 属性在水平和垂直方向上居中盒子。
• 使用 grid：创建具有 display: grid 属性的容器，然后使用 justify-content 和 align-contentDéfinissez des valeurs margin égales sur les côtés gauche et droit de la boîte pour la centrer à partir du bord du conteneur.

Utilisez l'attribut text-align : Définissez le text-align du conteneur de boîte sur "center", puis définissez la boîte sur inline-block code> ou élément <code>block.

Centré verticalement

🎜🎜🎜Utilisez les propriétés margin-top et margin-bottom : 🎜Définissez une margin pour la centrer à partir des bords supérieur et inférieur du conteneur. 🎜🎜🎜Utilisez l'attribut <code>position : 🎜Réglez la position de la boîte sur "absolue", puis utilisez top et bottom propriété pour le centrer verticalement. 🎜🎜🎜🎜Centré horizontalement et verticalement 🎜🎜🎜🎜🎜Utilisez flexbox : 🎜Créez un conteneur avec l'attribut display: flex puis utilisez align-items Les propriétés code> et <code>justify-content centrent la boîte horizontalement et verticalement. 🎜🎜🎜Utilisez grid : 🎜Créez un conteneur avec l'attribut display:grid, puis utilisez justify-content et align-content La propriété centre la boîte horizontalement et verticalement. 🎜🎜🎜🎜Utilisation des classes CSS 🎜🎜🎜Pour simplifier le processus de centrage, vous pouvez créer une classe CSS qui contient un style de centrage, comme ceci : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.centered { margin: auto; text-align: center; }</pre><div class="contentsignin">Copier après la connexion</div></div>🎜 Vous pouvez ensuite appliquer cette classe à n'importe quelle boîte que vous souhaitez centrer. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!