垂直居中/水平居中/浮动元素垂直居中

浮动元素垂直居中

以下方法：父元素定位都是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