css居中
水平居中：
说到水平居中，最简单的方法就是margin：0 auto;
也就是将margin-left 和 margin-right属性设置为auto;
源码和效果如下图所示:
ps:不要想当然的以为简单地将margin值设置为auto，就可以将元素水平、垂直居中(不过在css3弹性布局中确实可以这样子做，这里暂不做过多讨论)；
文本的居中对齐方式：
ps:文本垂直对齐一般上设置line-height和height 相等的值就可以!
padding填充
利用padding和background-clip配合实现div的水平垂直居中：
通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外div减去内div的差的一半，来实现：
盒子模型
绝对定位居中
盒模型
盒模型
调整尺寸
resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸，确定加了 overflow: auto
盒模型
margin填充(主要给父元素设置overflow来触发父元素的BFC)
对应的盒模型
列表内容
absolute定位+margin填充
对应的盒模型
总结：*此方法就是利用定位，将子元素设置top和left 均为 50%,然后margin-top 和
margin-left设为负的本身盒子的高和宽的一半，即可实现水平垂直居中！*
transform居中
上面讲到的div居中的例子中，div的宽度都是固定的，然而实际项目中，有可能遇到不定宽的div，特别是响应式或者移动端的设计中，更加常见。
Document
float:left;
width:100%;
height:200px;
background-color:red;
}
.children{
float:left;
position:relative;
top:50%;
left:50%;
}
.children-inline{
position:relative;
left:-50%;
-webkit-transform:translate(0,-50%,0);
transform:translate(0,-50%,0);
background-color:#ccc;
color:#fff;
}
我是水平垂直居中噢！
*首先我们利用float，将需要居中的div的父div也就是children的宽度收缩，然后left:50%,将children的左边与水平中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就水平居中了。
再来说说垂直方向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。但是这个50%是计算不出来的，所以我们用到了transform
translate3d(0, -50%, 0); 这个方法非常好用噢。*
flex居中
Document
width:100%;
height:200px;
}
.parent{
display:flex;
align-items:center;//垂直居中
justify-content:center;
width:100%;
height:100%;
background-color:red;
}
.children{
background-color:blue;
}
flex水平垂直居中的
