不定宽高水平垂直居中3种方式实现

一.使用CSS3 transform
外层容器
position:relative
内层容器
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;




    
    不定宽高水平垂直居中
    



    

二、flex布局
最简单的flex布局,外层容器加上如下样式即可
display: flex;
justify-content: center;
align-items: center;




    
    不定宽高水平垂直居中
    



    

三、利用table-cell
外层容器
display:table-cell;
text-align:center;
vertical-align:middle;
内部元素
vertical-align:middle;
display:inline-block;




    
    不定宽高水平垂直居中
    



    

你可能感兴趣的:(不定宽高水平垂直居中3种方式实现)