flex

子元素在父元素中水平垂直居中
.dad {
    display: flex;
    justify-content: center;
    align-items: center
}
 
任何一个容器都可以指定为Flex布局。
1
2
3
.box {
display: flex;
}
行内元素也可以使用Flex布局：
1
2
3
.box {
display: inline-flex
}
Webkit内核的浏览器需加上-webkit前缀。
注意：
设为Flex布局后，子元素的float、clear、vertical-alian属性都将失效。