纯CSS实现垂直水平居中内容总结

作为一名前端小童鞋，入行最开始就会碰到这样子的问题，兼容性也是大家考虑的重点之一，今天就来写一篇垂直水平居中的几种方法。话不多说，直接开干...       

1.  **table-cell **

HTML部分

<div class="box">
  <div class="content">垂直居中的块</div>
</div>

CSS

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

效果

2. 使用absolute去实现 (* 在这里我们content的高度，主要去靠里边内容去撑就可以了)

HTML部分

<div class="box">
  <div class="content">垂直居中的块</div>
</div>

CSS

.box { 
  position: relative;
  width: 100%;
  height: 400px;
}
.content {
  width: 100%;
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
或者 (* 注意: 各个定位的值不一定为0)
.content {
  width: 100%;
  max-width: 600px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

效果

3. flex布局

HTML部分

<div class="box">
  <div class="content">垂直居中的块</div>
</div>

CSS

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
}

效果

4. *display:inline-block (在这里我们通过:after来占位，其实这种方式很多地方都可以用到，后续会提到巧妙运用after的情况)

HTML部分

<div class="box">
  <div class="content">垂直居中的块</div>
</div>

CSS

.box {
  font-size: 0; // 是为了去除display: inline-block带来的间隙影响
  height: 400px;
}
.box:after {
  content:''; 
  width: 0; 
  height: 100%; 
  display: inline-block; 
  vertical-align: middle;
}
.content {
  vertical-align: middle;  
  display: inline-block;
  font-size: 16px; // 字号一定要加，不然内部字号都为0
}

效果

4. *display:inline-block (在这里我们通过:after来占位，其实这种方式很多地方都可以用到，后续会提到巧妙运用after的情况)

HTML部分

<div class="box">
  <div class="content">垂直居中的块</div>
</div>

CSS

.box {
  font-size: 0; // 是为了去除display: inline-block带来的间隙影响
  height: 400px;
}
.box:after {
  content:'';
  width: 0; 
  height: 100%; 
  display: inline-block; 
  vertical-align: middle;
}
.content {
  vertical-align: middle;  
  display: inline-block;  
  font-size: 16px; // 字号一定要加，不然内部字号都为0
}

效果

本人并不喜欢去把「需要居中的块级元素」宽写死，有时候可能需要考虑响应式的问题...
今天就到这里啦。新童鞋学会了吗？阿巴阿巴...