[CSS Layout 1] How to center the horizontal and vertical without knowing the width and height

1. Flex Layout (IE9 +)

<div class='out'>
    <div class='inner'</div> </div>Copy the code

.out{
    display:flex;
    justify-content:center;
    align-items:center;
    width:400px;
    height:400px;
    background:#F00;
}

.inner{
    background:# 000;
    color:#FFF;
}Copy the code

<div class='out'>
    <div class='inner'</div> </div>Copy the code

.out{
    position:relative;
    width:400px;
    height:400px;
    background:#F00; 
}

.inner{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%);
    background:# 000;
    color:#FFF;
}Copy the code

3. Display :table-cell(Internet Explorer 8 or later)

<div class='out'>
    <div class='inner'</div> </div>Copy the code

.out{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:400px;
    height:400px;
    background:#F00; 
}

.inner{
    display:inline-block;
    background:# 000;
    color:#FFF;
}Copy the code

4, floating (IE6, IE7)

<div class='container'>
    <div class='out'>
        <div class='inner'</div> </div> </div>Copy the code

.container{
    *position:relative;
}
.out{
   *position:absolute;
    *top:50%;
    *left:50%;    
    width:400px;
    height:400px;
    background:#F00; 
}

.inner{
    *position:relative;
    *display:inline;
    *zoom:1;
    *top:-50%;
    *left:-50%;    
}Copy the code