div塊元素垂直水平居中方法總結

一、已知塊級元素的寬和高,使用絕對定位+外邊距設定水平垂直居中。css

父元素position:relative,子元素position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2;css3

效果圖以下chrome

 

代碼:瀏覽器

<div class="box">
    <div class="center-box1">
        <p>【第一種方法】知道長和寬,使用絕對定位+外邊距設定水平垂直居中</p>
    </div>
</div>

.box {
    background: #6c94be;
    width: 100%;
    height: 450px;
    position: relative;  
}
.center-box1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background: #5B83AD;
}

二、使用css3樣式屬性display:flex設定水平垂直居中,父元素樣式屬性display:flex;子元素使用margin:auto;未知子元素高度的時候依然能夠使用。flex

通常chrome和火狐都能很好地支持。ie不支持spa

效果圖以下:3d

代碼:code

<div class="box">    
    <div class="center-box2">
        <p>【第二種方法】使用css3樣式屬性display:flex設定水平垂直居中</p>
    </div>
</div>

.box {
    background: #6c94be;
    width: 100%;
    height: 450px;
    display: flex;
}
.center-box2 {
    margin: auto;
    width: 200px;
    background: #5B83AD;
}

三、依然使用絕對定位+css3樣式屬性transformorm

transform中translate偏移的百分比值是相對於自身大小的,不管絕對定位元素的尺寸是多少,其都是水平垂直居中顯示的,但問題是兼容性很差。IE9+以及其餘現代瀏覽器才支持。IE9以前版本不支持,在IE8模式下,不居中。blog

效果圖以下:

代碼:

<div class="box">    
    <div class="center-box3">
        <p>【第三種方法】使用css3樣式屬性transform,transform中translate偏移的百分比值是相對於自身大小的</p>
    </div>
</div>

.box {
    background: #6c94be;
    width: 100%;
    height: 450px;
    position: relative;  
}

.center-box3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #5B83AD;
    width: 200px;
}

 四、已知塊級元素的寬和高,設置其樣式屬性position:absolute;top:0;left:0;bottom:0;right:0;+margin:auto;

效果圖以下:

代碼:

<div class="box">    
    <div class="center-box4">
        <p>【第四種方法】已知寬和高,絕對定位+margin:auto;</p>
    </div>
</div>

.box {
    background: #6c94be;
    width: 100%;
    height: 450px;
    position: relative;
}
.center-box4 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: #5B83AD;
    margin: auto;
}

未完待續...

相關文章
相關標籤/搜索