浮動元素垂直居中

以下方法：父元素定位都是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>的容器設(shè)置如下**/
{
    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
缺點(diǎn)：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%)

水平居中

• 元素為行內(nèi)元素，設(shè)置父元素text-align:center
• 如果元素寬度固定，可以設(shè)置左右margin為auto;
• 絕對定位和移動: absolute + transform
• 使用flex-box布局，指定justify-content屬性為center
• display設(shè)置為tabel-ceil