常見的div居中對齊方式

william發表於2017-09-02

前段時間面試的時候面試題裡面對css考察最多的就是div居中對齊的問題，因此特地對div居中對齊的方式做了一個簡單的總結，本文的目標就是希望各位在以後根據不同的情況使用不同的居中方式，閒話少說，直接上程式碼

<div class="wrapper">
    <div class="inner"></div>
</div>

Flex佈局實現

.wrapper{
    display: flex;
    width: 500px;
    height: 500px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.wrapper .inner{
    width: 300px;
    height: 300px;
    background-color: #666;
}

父元素display設定為flex,使用flexbox佈局，在此佈局下的元素就具備了伸縮的特性，再通過justify-content設定元素主軸上的對齊方式center,即可實現水平方向上的對齊，再利用align-items設定側軸上的對齊方式center,即可實現垂直方向上的對齊

流體特性

 .wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: #666;
}

當一個絕對定位元素，其對立方向屬性同時具有數值時，其流體特性就觸發了，margin當兩側的值都是auto時會平分剩餘空間的大小，因此當四個方向都是auto時就可以實現水平和垂直方向的居中

transform平移

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    background-color: #666;
}

已知寬高絕對定位

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    margin-top: 50%;
    margin-left: 50%;
    top: -150px;
    left: -150px;
    width: 300px;
    height: 300px;
    background-color: #666;
}

以上內容是個人的一點總結，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏

相關文章