CSS-盒子垂直居中-持续更新

一、CSS-盒子垂直居中几种姿势

演示环境代码：

// css
.outer-box {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.inner-box {
  width: 100px;
  height: 100px;
  background-color: red;
}
// html
<div class="outer-box">
  <div class="inner-box"></div>
</div>

1. 使用table-cell + vertical-align

代码：

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

效果：

原理：

使用display:table-cell; 布局，此元素会作为一个表格单元格显示（类似 和 ）。vertical-align:用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

兼容程度：

优劣：

1. 兼容程度比较好，基本上主流浏览器都支持，IE从6开始就支持该属性。
2. 不需要固定居中元素的高。

2. 使用inline-block + line-height

代码：

.outer-box {
  line-height: 300px
}
.inner-box {
  /* 如果本身就是内联,则不需要设置 */
  display: inline-block;
  line-height: initial;
  vertical-align: middle;
}

原理：

利用元素的height和line-height相同的时候，会使其文本内容垂直居中。将父元素的line-height设置成父元素的高度。 子元素必须是内联元素，所有需要设置display: inline-block;因为行高是可以被继承的，所以这边需要重置子元素的行高，line-height: initial; 最后指定行内元素的对齐属性vertical-align: middle;

兼容：

优劣：

1. 兼容也是比较好的，简单粗暴
2. 只适合行内元素。
3. 需要知道父元素的高度。
4. 无需关心子元素的高度。

3. 使用伪元素，inline-block元素特性

代码：

.outer-box::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.inner-box {
  display: inline-block;
  vertical-align: middle;
}

效果：

原理：

在居中元素的父元素上，使用一个伪元素，将这个伪元素设置为 inline-block 后，就好像它原来就是一个真正的 DOM 元素，存在于页面上。然后再将居中元素设置为 inline-block，根据 inline-block 的特性（多个相邻的 inline-block 元素会横向并排显示），居中元素会和伪元素横向并排显示。并且设置 vertical-align: middle; 后，它们会互相垂直对齐，最后将伪元素高度撑起来 height: 100%;，居中元素会对齐伪元素，从而实现了垂直居中。

兼容：

同inline-block + line-height

优劣：

1. 不需要固定居中元素的高。
2. 写法上多了一个伪元素。

4. 使用flex

代码：

.outer-box {
  display: flex;
  /* flex布局中，定义了项目在交叉轴上的对齐方式。center表示居中显示 */
  align-items: center; 
}

效果：

原理：

利用flex布局方式

兼容：

优劣：

1. 兼容尚可。
2. 与flex布局搭配使用。
3. 无需子元素固定高度。

5. 使用grid

代码：

.outer-box {
  display: grid;
}

.inner-box {
  align-self: center; 
}

效果：

原理：

display: grid;采用网格布局，【默认是块级元素】。通过align-self改变网格区域中的项目的对齐方式。

兼容：


优劣：

1. 对IE的兼容不是很好。

2. 使用到了二维布局方式：网格布局。

6. 使用定位居中【absolute + transform】

代码：

.outer-box {
  position: relative;
}

.inner-box {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

效果：

原理：

利用“子绝父相”技巧，top:50%;将子元素的盒子向下移动50%，其实这个时候，盒子并没有垂直居中，向下多移了本身盒子的50%。这是因为移动的时候，都是以盒子的左上角为基准的。再使用transform: translate(0, -50%)；将这50%平移回来，达到垂直居中的效果。

兼容：


优劣：

1. 相对前面几种，要复杂了点。
2. 兼容支持也是不错的。

7. 使用定位居中【absolute + calc】

代码：

.outer-box {
  position: relative;
}

.inner-box {
  position: absolute;
  top: calc(50% - 50px);
}

效果：

原理：

使用定位加top的方式，会多偏移子元素高度的一半，可以使用calc计算函数，50%父盒子的高度 减去子盒子高度的一半，就是正好需要偏移的高度。前提是需要知道子盒子的高度，也就是说需要固定子盒子的高度。

兼容：

优劣：

1. 需要固定子盒子的高度
2. 对IE兼容不是很友好。

8. 使用定位居中【absolute + 负margin】

代码：

.outer-box {
  position: relative;
}

.inner-box {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

效果：

原理：

使用定位加top的方式，会多偏移子元素高度的一半，可以使用margin-top的方式，向下偏移盒子高度的一半，就是正好达到居中的要求。前提是需要知道子盒子的高度，也就是说需要固定子盒子的高度。

兼容：

优劣：

1. 兼容性良好。
2. 需要固定子盒子的高度。

9. 使用定位居中【absolute + margin:auto】

代码：

.outer-box {
  position: relative;
}

.inner-box {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

效果：

原理：

使用了 CSS 中的定位属性（absolute、fixed 等）后，如果 top设置了具体值，没有设置 bottom 和 height，那么就会自动计算，把剩余的空间分配给 bottom 和 height。如果 top、bottom 和 height 都设置了具体值，并且没有占满横向空间，那么剩余空间就处于待分配状态，此时设置 margin: auto; 意味着把剩余的空间分配给 margin，并且上下均分，所以就实现了垂直居中。

兼容：

同absolute + 负margin的方式

优劣：

1. 兼容性良好。
2. 需要固定子盒子的高度。