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

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

行内元素水平居中

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

行内水平居中

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

块级元素水平居中

定宽

margin: 0 auto;

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

定宽块级元素水平居中

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

position + margin-left

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

定宽

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 {
  border: 1px solid red;
  position: absolute;
  width: 80px;
  left:0;
  right:0;
  margin:0 auto;
}

不定宽

table + margin

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

不定宽块级元素水平居中

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

inline-block + text-align

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

son1son2

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

flex

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

son1son2

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

position + transform

transform实现

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