Alignement horizontal et vertical CSS

élément centré

éléments centrés horizontalement et verticalement

centrer l'élément

Pour centrer horizontalement un élément en bloc (comme <div>), utilisez marge: auto;.

Définir la largeur de l'élément empêchera son extension aux bords du conteneur.

Ensuite, l'élément occupera la largeur spécifiée et l'espace restant sera réparti uniformément entre les marges extérieures :

Cet élément div est centré.

Exemple

.center {
  marge: auto;
  largeur: 50%;
  border: 3px solid green;
  padding: 20px;
}

Essayez-le vous-même

注意：Si l'attribut largeur l'attribut (ou le régler à 100％), le centrage ne sera pas valide.

centrer le texte

Si vous souhaitez centrer le texte à l'intérieur d'un élément uniquement, utilisez text-align: center;：

Ce texte est centré.

Exemple

.center {
  text-align: center;
  border: 3px solid green;
}

Essayez-le vous-même

Astuce :Pour plus d'exemples sur la mise en page du texte, voir Texte CSS ce chapitre.

centrer l'image

Pour centrer une image, veuillez régler les marges extérieures gauche et droite auto，并将其设置为块元素：

Exemple

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Essayez-le vous-même

左和右对齐 - 使用 position

对齐元素的一种方法是使用 position: absolute; :

这个 div 是右对齐的。

Exemple

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Essayez-le vous-même

注意：绝对定位的元素将从正常流中删除，并可能出现元素重叠。

左和右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性：

Exemple

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Essayez-le vous-même

注意：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用 clearfix hack 来解决此问题（请看下面的例子）。

clearfix Hack

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

Exemple

.clearfix {
  overflow: auto;
}

Essayez-le vous-même

垂直对齐 - 使用 padding

有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距：

我是垂直居中的。

Exemple

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Essayez-le vous-même

如需同时垂直和水平对齐，请使用 padding 和 text-align: center;：

Je suis centré horizontalement et verticalement.

Exemple

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Essayez-le vous-même

垂直对齐 - 使用 line-height

另一个技巧是使用其值等于 height 属性值的 line-height 属性：

Je suis centré horizontalement et verticalement.

Exemple

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* 如果有多行文本，请添加如下代码：*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Essayez-le vous-même

垂直对齐 - 使用 position 和 transform

如果您的选择不是 padding 和 line-height，则另一种解决方案是使用 position 和 transform 属性：

Je suis centré horizontalement et verticalement.

Exemple

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Essayez-le vous-même

Astuce :Vous allez dans Transformations 2D Vous apprendrez plus sur l'attribut transform dans ce chapitre.

Alignement vertical - Utilisation de Flexbox

Vous pouvez également utiliser flexbox pour centrer le contenu. Notez que les versions IE10 et antérieures ne prennent pas en charge flexbox :

Je suis centré horizontalement et verticalement.

Exemple

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

Essayez-le vous-même

Astuce :Vous allez dans mon Flexbox CSS Vous apprendrez plus sur Flexbox dans ce chapitre.