Comment centrer la boîte en HTML

Pour définir le centre de la boîte en HTML, vous pouvez utiliser les méthodes suivantes : centrage horizontal : text-align : center ; margin : 0 auto ; vertical-align : middle ; display : align-items : center ; two dimensions Center: display: flex; Il existe plusieurs manières d'y parvenir, selon le type d'éléments que l'on souhaite aligner et le centrage souhaité.

Centrage horizontal

Le centrage horizontal signifie centrer la boîte horizontalement sur son élément parent. Il existe deux méthodes courantes :

text-align: center;

 : cela centrera le contenu du texte horizontalement dans un élément de niveau bloc.

margin: 0 auto; : Cela centrera l'élément de niveau bloc horizontalement dans l'élément parent.

Par exemple :

<code class="html"><div style="text-align: center;">
  <p>Hello, world!</p>
</div></code>

Centrage vertical
• text-align: center;：这会将文本内容水平居中在一个块级元素中。
• margin: 0 auto;：这会将块级元素水平居中在父元素中。

例如：

<code class="html"><div style="display: flex; align-items: center;">
  <img src="image.jpg" style="vertical-align: middle;">
</div></code>

垂直居中

垂直居中是指使盒子垂直对其父元素居中。有两种常用的方法：

• vertical-align: middle;：这会将行内元素（如图像或文本）垂直居中在父元素中。
• display: flex; align-items: center;：这会将块级元素垂直居中在父元素中。

例如：

<code class="html"><div style="display: flex; justify-content: center; align-items: center;">
  <div>Box</div>
</div></code>

两个维度居中

要同时水平和垂直居中一个盒子，可以使用 flexboxLe centrage vertical signifie centrer la boîte verticalement sur son élément parent. Il existe deux méthodes courantes :

🎜🎜🎜vertical-align: middle;🎜 : Cela centrera verticalement un élément en ligne (comme une image ou un texte) dans l'élément parent. 🎜🎜display: flex; align-items: center;🎜 : Cela centrera verticalement l'élément de niveau bloc dans l'élément parent. 🎜Par exemple : 🎜rrreee🎜🎜Centrage en deux dimensions🎜🎜🎜Pour centrer une boîte horizontalement et verticalement, vous pouvez utiliser flexbox, comme indiqué ci-dessous : 🎜rrreee

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!