文本垂直居中

拖延症太强，每次想写点东西的时候总是会想着明天写，今天强行克服了，总算是动工了，好吧，我的第一篇技术博客。

说真的css这玩意儿，很多人认为写写就行了，但在我看来这东西的复杂程度不下于js，写好真的是很难很难，各种布局都有不同的写法，写这个的原因是把常写的东西总结一下，希望给大家参考参考，同时也是对我自己的一个学习总结吧，见识不足，还请谅解。

html统一样式

<div class="text">
  <span class="pox"></span>
</div>

知道高度

1.绝对定位absolute

// 父标签用相对定位
.text1{
  position: relative;
  height: 400px;
}
// 子标签用绝对定位，然后top:50%;margin-top:负的高度的一半，ok，垂直居中达成
.pox1{
  line-height: 30px;
  position: absolute;
  top: 50%;
  margin-top: -30px;
}

2.单行文本,这个简单

// 父标签行高=父标签行高度，ok了;
.text4{
  line-height:400px;
  height: 400px;
}

不知道高度

1.table-cell,把div作为一个表格单元格使用,单元格垂直居中？so easy,用vertical-align: middle.

// 父标签
.text2{
  display: table-cell;
  vertical-align: middle;
  height: 400px;
}
// 子标签
.pox2{
  display: inline-block;
}

2.table,原理同上

// 父标签
.text3{
  display: table;
  height: 400px;
}
// 子标签
.pox3{
  display: table-cell;
  vertical-align: middle;
}

3.妙用:after占位居中,让:after占据全部高度,然后使用vertical-align:middle与:after竖直居中对齐,由于:after宽为0,看不见,就表现为pox5垂直居中了

// 父标签
 .text5{
   height: 400px;
}
.text5:after{
   content:'';
   width:0;
   height:100%;
   display:inline-block;
   vertical-align:middle;
}
// 子标签
.pox5{
   vertical-align:middle;
   display:inline-block;
}

4.display:flex,这玩儿说起来就多了,弹性盒子布局,布局爽到飞起，就是兼容性有点问题，不过加上-webkit-后能适应绝大部分游览器

// 父标签
.text6{
  display: -webkit-flex;
  display: flex;
  height: 400px;
  -webkit-align-items: center;
  align-items: center;
}
// 子标签
.pox6{
  -webkit-flex: 1;
  flex: 1;
}

5.display:-webkit-box,这个是flex的旧版本,同上

// 父标签
.text7{
  display: -webkit-box;
  -webkit-box-align:center;
  height: 400px;
}

6.transform,利用translateY(-50%);translateY(-50%)其实就是垂直向上偏移物体自身高度的一半,效果和margin-top:负的高度的一半差不多,不过不需要知道具体高度,浏览器自己计算.

// 父标签
.text8{
  position: relative;
  height: 400px;
}
// 字标签
.pox8{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

css的妙处就是可以用很多种方法实现同一个效果。