如何让一个不定宽高的div水平垂直居中

不定宽高的div水平垂直居中的几种方式

1. 用css方法:父盒子设置:display:table-cell,vertical-align:middle,text-align: center;,子盒子设置:display:inline-block,

代码实现

html部分

    <div class='father'>
       <div class = 'son'>
        123
       </div>
    </div>

css部分

    .father {
        width:200px;
        height:200px;
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        background-color:#ff8000;
    }
    .son {
        display:inline-block;
        background-color: #ff0000;
    }

代码效果

2. 用css3中的transform实现:父盒子设置position:relative,子盒子设置position:absolute,top:50%,left:50%,transform:translate(-50%,-50%)

代码实现

html部分

    <div class='father'>
       <div class = 'son'>
        123
       </div>
    </div>

css部分

    .father {
        position:relative;
        width:200px;
        height:200px;
        background-color:#ff8000;
    }
    .son {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        background-color: #ff0000;
    }

代码效果