浮动元素垂直居中
以下方法：父元素定位都是positon:relative(方法一和方法二)
方法一
position:abosulte
margin:auto
width:100px
height:100px
top:50%
margin-top:50px
若是不知道高度的话：
position:abosulte
margin:auto
top:50%
margin-top:50%
方法二
position:absolute
width:100px
height:100px
margin:auto
top:0
left:0
bottom:0
right:0
图片垂直居中
#container /**<img>的容器设置如下**/
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
垂直居中
1 :如果是单行文本，line-height = height
2:dispaly:flex;align-items:center（子元素垂直居中）justify-content:center(子元素水平居中)
3:display:table-cell vertial-align:center
缺点：ie6 7 不兼容 父级overflow:hidden失效
4:position:absolute的情况
- margin:auto; top:0;bottom:0
- 知道元素的高度： top:50%;margin-top:-元素高度/2
- 未知元素的高度：top:50%;margin-top:transformY(-50%,-50%)
水平居中
- 元素为行内元素，设置父元素text-align:center
- 如果元素宽度固定，可以设置左右margin为auto;
- 绝对定位和移动: absolute + transform
- 使用flex-box布局，指定justify-content属性为center
- display设置为tabel-ceil
