css垂直居中

css垂直居中的几种方式总结：

1、line-height

适用情景：单行文字垂直居中技巧,将单行文字的行高设定后，文字会位于行高的垂直中间位置

<div class="container">maomao</div>

.container {
  width: 200px;
  background: #ddd;
  line-height: 50px;
  margin: 0 auto;
}

2、line-height

<div class="container">maomao</div>

.container {
  height: 200px;
  /*width: 200px;*/
  background: #ddd;
  line-height: 200px;
  margin: 0 auto;
}

3、line-height + inline-block

将多个元素或多行元素当成一个行元素来看待，将这些数据多包一层，并将其设定为inline-block，并在该inline-block对象的外层对象使用inline-block来代替height的设置

<div class="box box2">
  <div class="content">
    欢迎来到<a href="http://www.cnblogs.com/wuhuaguo">毛毛的博客</a>一起交流
  </div>
</div>

.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}

4、absolute + margin 负值

适用情景：多行文字的垂直居中技巧

<div class="box box2">
  <div class="content">
    欢迎来到<a href="http://www.cnblogs.com/wuhuaguo">毛毛的博客</a>一起交流
  </div>
</div>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box2 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}

5、absolute + margin auto

适用情景：多行文字的垂直居中技巧（定位元素必须有固定的宽高（百分比也算）才能正常居中）

<div class="box box2">
  <div class="content">
    欢迎来到<a href="http://www.cnblogs.com/wuhuaguo">毛毛的博客</a>一起交流
  </div>
</div>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

6、absolute + translate

适用情景：多行文字的垂直居中技巧

<div class="box box2">
  <div class="content">
    欢迎来到<a href="http://www.cnblogs.com/wuhuaguo">毛毛的博客</a>一起交流
  </div>
</div>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box2 .content{
  width: 400px;
  background: #ccc;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

7、Flex + align-items

适用情景：多行文字的垂直居中技巧

<div class="box box2">
  <div class="content">
    欢迎来到<a href="http://www.cnblogs.com/wuhuaguo">毛毛的博客</a>一起交流
  </div>
</div>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}

8、Flex + :before + flex-grow

适用情景：多行文字的垂直居中技巧

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box:before{
  content: '';
  flex-grow: .5;
}
.content{
  width: 400px;
  background: #ccc;
}

9、Flex + margin

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

10、Flex + align-self

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center
}

11、Flex + align-content

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}
.box2:before,
.box2:after{
  content: '';
  display: block;
  width:100%;
}

12、Display：table-cell

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

13、Relative + translateY

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}