[css佈局1]不知寬高情況下，水平垂直居中的幾種方式

呼啦圖謎發表於2019-03-09
CSS

1、flex佈局（IE9以上）

<div class='out'>
    <div class='inner'>掘金是一個幫助開發者成長的社群</div>
</div>複製程式碼
.out{
    display:flex;
    justify-content:center;
    align-items:center;
    width:400px;
    height:400px;
    background:#F00;
}

.inner{
    background:#000;
    color:#FFF;
}複製程式碼

2、transform佈局(IE9以上)

<div class='out'>
    <div class='inner'>掘金是一個幫助開發者成長的社群</div>
</div>複製程式碼
.out{
    position:relative;
    width:400px;
    height:400px;
    background:#F00; 
}

.inner{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%);
    background:#000;
    color:#FFF;
}複製程式碼

3、display:table-cell(IE8以上瀏覽器)

<div class='out'>
    <div class='inner'>掘金是一個幫助開發者成長的社群</div>
</div>複製程式碼
.out{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:400px;
    height:400px;
    background:#F00; 
}

.inner{
    display:inline-block;
    background:#000;
    color:#FFF;
}複製程式碼

4、浮動（IE6、IE7）

<div class='container'>
    <div class='out'>
        <div class='inner'>掘金是一個幫助開發者成長的社群</div>
    </div>
</div>複製程式碼
.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%;    
}複製程式碼


相關文章