CSS樣式之a(chǎn)bsolute居中的三種方法

閱讀量： 4082 發(fā)布日期： 2022-10-27 07:44:00

CSS樣式中的absolute居中有三種方法，分別是相對(duì)于元素的left、right和bottom。這三種方法的區(qū)別是：left和right方法的居中是相對(duì)于元素的左邊和右邊的，而bottom方法的居中是相對(duì)于元素的底部的。

CSS樣式之a(chǎn)bsolute居中的三種方法 1、absolute居中的原理

絕對(duì)定位的元素會(huì)相對(duì)于最近的已定位的祖先元素進(jìn)行定位。如果元素沒有已定位的祖先元素，則會(huì)相對(duì)于最近的包含塊進(jìn)行定位。如果一個(gè)元素的祖先元素都沒有定位，那么該元素會(huì)相對(duì)于文檔的body元素進(jìn)行定位。要想讓absolute定位的元素居中，只需設(shè)置其left和top屬性為50%即可。這是因?yàn)樵O(shè)置為50%時(shí)，元素的左上角會(huì)相對(duì)于其包含塊的左上角居中。而元素的包含塊正是我們所要的居中目標(biāo)元素。為了使整個(gè)元素向左上方移動(dòng)50%的距離，我們還需要指定元素的margin-left和margin-top為負(fù)的自身寬度和高度的一半。這樣，我們就能讓元素整體向左上方移動(dòng)50%的距離，從而實(shí)現(xiàn)了居中。

2、三種absolute居中方法

第一種方法是使用絕對(duì)定位的left和right屬性，將元素同時(shí)放置到水平方向的兩端。當(dāng)元素在兩端同時(shí)設(shè)置了絕對(duì)定位時(shí)，元素會(huì)保持在兩端之間，并且元素的寬度會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整。第二種方法是使用絕對(duì)定位的left屬性和transform屬性，將元素向左側(cè)移動(dòng)50%，然后使用負(fù)半個(gè)元素寬度的margin-left屬性將元素向右側(cè)移動(dòng)50%，這樣就能夠?qū)⒃匾苿?dòng)到水平方向的中心位置。第三種方法是使用絕對(duì)定位的left屬性和transform屬性，將元素向右側(cè)移動(dòng)50%，然后使用負(fù)半個(gè)元素寬度的margin-left屬性將元素向左側(cè)移動(dòng)50%，這樣就能夠?qū)⒃匾苿?dòng)到水平方向的中心位置。

3、使用情況分析

對(duì)于absolute居中的使用情況，主要取決于頁(yè)面布局。如果頁(yè)面布局是固定寬度或者是流式布局，那么absolute居中是比較容易實(shí)現(xiàn)的。但是如果頁(yè)面布局是不定寬度或者是響應(yīng)式布局，那么absolute居中會(huì)相對(duì)困難一些。需要結(jié)合media query進(jìn)行調(diào)整。

4、案例分享

方式一

<div class="ago">

   <div class="mid"></div>
</div>

.ago{

    width:400px;

    height:200px;

    background:#ccc;

    position:relative;
}
.mid{

    width:50px;

    height:50px;

    background:red;

    position:absolute;

    left:50%;

    top:50%;

    margin:-25px 0 0 -25px;
}

方式二：

<div class="nb">

     &nbsp;<div class="middle"></div>
</div>

.nb{

     width:400px;

     height:200px;

     background:#ccc;

     text-align:center;

     overflow:hidden;
}
.middle{

    display:inlineblock;

    *display:inline;*zoom:;

    width:50px;height:50px;

    background:green;

    position:absolute;

    margin-left:-38px;

    margin-top:75px;
}

方式三：

<div class="db">

    <div class="dm"></div>
</div>

.db{

    width:400px;

    height:200px;

    background:#ccc;
}
.dm{

    width:50px;

    height:50px;

    background:pink;

    position:absolute;

    left:;right:;

    top:;bottom:;

    margin:auto;
}

5、小結(jié)

綜合以上三種方法，可以根據(jù)實(shí)際情況進(jìn)行選擇。一般情況下，如果需要將元素居中，并且不需要考慮兼容性問題，可以使用第二種方法。如果需要兼容IE8及以下版本，可以使用第三種方法。

absolute居中的方法很多，前面已經(jīng)介紹了三種方法。其實(shí)，還有很多種方法可以選擇，比如相對(duì)于元素的top、leftmargin和rightmargin等。不同的方法可以達(dá)到不同的效果，所以在使用absolute居中時(shí)要根據(jù)具體的情況選擇合適的方法。

作者: bosscms，轉(zhuǎn)載時(shí)必須經(jīng)得同意并以鏈接形式注明作者和原始出處及本聲明。

CSS樣式