常用居中方法

整理下常用的居中方法

1.采用display:flex方法

#fu{

    display:flex;
    justify-content:center;
    align-items:center;

}

其子元素会在垂直和水平方向都居中

2.采用display:table-cell方法

#fu{
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}

如果其子元素为块级标签，需要设置dispaly:inline-block才能实现子元素垂直和水平方向居中

3.采用定位方法

#fu{

    position: relative;

}

#child{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}

或者

#child{width:Xpx;height:Ypx;position:absolute;top:50%;left:50%;margin:-Y/2px 0 0 -X\2px;}