垂直水平居中

绝对定位实现垂直水平居中
优点：兼容性好
缺点：需要知道宽高，不够灵活

<div class="box">
  <div class="txt">已知宽高</span>
</div>

.txt{
  width: 600px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -200px;
  margin-left: -300px;
}

transform实现垂直水平居中
优点：不需要知道宽高，灵活
缺点：兼容性不好，在Mobile设备上建议使用

<div class="box">
  <div class="txt">未知宽高</span>
</div>

.txt{
  width: 600px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

margin:auto实现垂直水平居中
优点：灵活且兼容性好（IE8+）
缺点：适用于有尺寸的元素。

<div class="box">
  <div class="txt">已知宽高</span>
</div>

.txt{
  width: 600px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

原理：
先把margin:auto; width:600px; height:400px;干掉后，你会惊奇的发现，.txt 铺满了整个.box。这是为什么呢？
先看下剩余属性：left,right,top,bottom，文档说明的很清楚，比如：left值，就是元素的左边缘距离父元素左边缘的距离。当left-right 两个值同时存在且都为0，top-bottom两个值也同时存在且都为0。子元素.txt只能左右上下铺满整个.box。
再看下margin:auto。它的填充规则和普通流体元素一模一样：

• 如果一侧定值，一侧auto, auto为剩余空间大小
• 如果两侧为auto, 则平分剩余空间。

flexbox 实现垂直水平居中
优点：不需要知道宽高，灵活
缺点：兼容 性不好，在Mobile设备上建议使用

<div class="box">
  <div class="txt">未知宽高</span>
</div>

.box{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}

table 实现垂直水平居中
优点：兼容性好

<div class="box">
  <span class="txt">这里显示多行文字</span>
</div>

.box{
  width:500px;
  height:500px;
  border:1px solid red;
  
  display: table-cell;
  vertical-align:middle;
}
.box .txt{
  display:inline-block;
}