CSS居中对齐的几种方式

一、水平居中
1、在块级父容器中让行内元素或者类行内元素居中，只需使用 text-align: center，这种方法可以让 inline/inline-block/inline-table/inline/flex 居中。

  水平居中

.container {
  text-align: center;
}

2、margin: 0 auto; 或者 margin: auto; 对于块级父容器中的块级元素，不需要display: table，行内元素则需要。

  水平居中

.content {
  margin: 0 auto;
  display: table;
}

3、脱离文档流的水平居中。内部div固定宽度，设置left为50%，接着使用负边距的方式调整，将margin-left设置为负的宽度的一半。

  
水平居中

.container {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  width: 100px;
  margin-left: -50px;
}

也可以将margin-left: -50px;换成transform: translateX(-50%); 这种方式可以不用已知元素宽度。

4、弹性盒子。

  
水平居中

.container {
  display: flex;
  justify-content: center;
}

二、垂直居中
1、行内元素的垂直居中把height和line-height的值设置成一样的即可。

  垂直居中

.container {
  height: 100px;
  line-height: 100px;
}

2、display: table-cell，可以使高度不同的元素都垂直居中。

  
垂直居中

.container {
  display: table-cell;
  vertical-align: middle;
}

3、脱离文档流的垂直居中。内部div固定高度，设置top为50%，接着使用负边距的方式调整，将margin-top设置为负的高度的一半。

  
垂直居中

.container {
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

也可以将margin-top: -50px;换成transform: translateY(-50%); 这种方式可以不用已知元素高度。

4、弹性盒子。

  
垂直居中

.container {
  display: flex;
  align-items: center;
}

三、水平垂直居中
可以将前面几种方式结合起来实现水平垂直居中。

1、text-align: center 与 display: table-cell 结合使用。

  
垂直居中

.container {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.content {
  display: inline-block;
}

2、脱离文档流的居中方式

  
水平垂直居中

.container {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
}

或者

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

或者

.content {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

3、弹性盒子。

  
垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}