CSS实现水平居中的几种方法

了解几种实现水平居中的方法。

行内元素水平居中

只需要给父元素设置 text-align:center; 即可。

<div>
  <span>行内水平居中</span>
</div>

div{
  border:1px solid red;
  text-align:center;
}

块级元素水平居中

定宽

margin: 0 auto;

块级元素的 width 一定时，只需要给需要居中的块级元素设置 margin: 0 auto; 即可。

<div>定宽块级元素水平居中</div>

div {
  width: 200px;
  border: 1px solid red;
  margin: 0 auto;
}

position + margin-left

使用绝对定位，然后设置 left: 50%; 以及 margin-left 设置为负数的宽度的一半。

<div>定宽</div>

div {
  border: 1px solid red;
  position: absolute;
  width: 80px;
  left: 50%;
  margin-left: -40px;
}

position + left + right + margin

使用绝对定位，然后给 left、right 都设置为 0，然后再设置 margin:0 auto; 即可。

<div>定宽</div>

div {
  border: 1px solid red;
  position: absolute;
  width: 80px;
  left:0;
  right:0;
  margin:0 auto;
}

不定宽

table + margin

当宽度不固定时，给居中的元素设置 display: table; 和 margin: 0 auto; 即可。

<div>不定宽块级元素水平居中</div>

div {
  border: 1px solid red;
  margin: 0 auto;
  display: table;
}

inline-block + text-align

当有一个或多个块级元素时，给父元素设置 text-align: center;，然后给子元素设置 display: inline-block; 即可。

<div class="father">
  <div class="son">son1</div>
  <div class="son">son2</div>
</div>

.father {
  border: 1px solid green;
  text-align: center;
}
.son {
  border: 1px solid red;
  display: inline-block;
}

flex

只需要给父元素设置 display: flex; 和 justify-content: center; 即可。

<div class="father">
  <div class="son">son1</div>
  <div class="son">son2</div>
</div>

.father {
  border: 1px solid green;
  display: flex;
  justify-content: center;
}

position + transform

<div>transform实现</div>

div {
  border: 1px solid red;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}