Position:absolute屬性定位居中(position)

在web前端的日常工作中，經(jīng)常會(huì)遇到設(shè)計(jì)師設(shè)計(jì)稿上不同模塊重疊顯示的需求。而要將兩個(gè)不同模塊重疊顯示通常是通過CSS中的position屬性來(lái)設(shè)置的。

Position可取的值有 absolute、fixed、relative、static、inherit這些，具體說(shuō)明可見下表：
前不久我在運(yùn)用html+css來(lái)實(shí)現(xiàn)設(shè)計(jì)稿的前端效果工作中遇到了一個(gè)模塊上下左右居中的問題，最開始看到的這塊內(nèi)容的時(shí)候，首先想到的是運(yùn)用position:absolute;屬性來(lái)定位，雖然最終是成功實(shí)現(xiàn)了模塊上下左右居中的效果，但是過程卻有些波折。

舉個(gè)例子，要實(shí)現(xiàn)下圖的上下左右居中：

如果是正常來(lái)說(shuō)，基本就是量出兩個(gè)模塊的高度，然后用margin屬性來(lái)設(shè)置使紅色模塊上下左右相對(duì)于灰色模塊居中，這里給的灰色模塊是600px * 600px的大小，紅色模塊是100px*100px的大小。CSS代碼實(shí)現(xiàn)如下：
<div class="div1">
<div class="div2"></div>
</div>
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
margin: 250px auto;
background: #f00;
}

</style>
這樣固然能實(shí)現(xiàn)紅色模塊居中的效果，但是卻不太理想，如果紅色模塊是灰色模塊的內(nèi)容中獨(dú)立出來(lái)的呢？

在這里我是毫不猶豫的就選擇了position:absolute;這個(gè)屬性來(lái)實(shí)現(xiàn)的。這離將紅色模塊相對(duì)于灰色模塊獨(dú)立出來(lái)，這里讓灰色模塊填充文字，給紅色模塊設(shè)置透明度來(lái)對(duì)比。CSS實(shí)現(xiàn)代碼如下：
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
background: #f00;
position: absolute;
left: 250px;
top: 250px;
opacity: .5;
}

效果如下：
雖然實(shí)現(xiàn)了這個(gè)效果，但是卻不甚滿意，要是不能固定灰色模塊的高度呢，要是不能固定紅色模塊的高度呢？

于是稍加思索后我寫出了下面這樣的解決方法（這里還是默認(rèn)上面的寬高）：
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
transform: translateY(-50%);
background: #f00;
opacity: .5;
}
</style>

效果圖如下：
問題來(lái)了，這里雖然上下是居中的，但是左右卻明顯的沒有居中，經(jīng)過測(cè)試，是
left: 50%;
transform: translateX(-50%);
這兩個(gè)屬性沒有達(dá)成同等偏移。于是又改進(jìn)了一下：
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
background: #f00;
opacity: .5;
}
</style>

這樣就達(dá)到預(yù)期效果了。

以上就是關(guān)于Position:absolute屬性定位居中(position)，希望對(duì)你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

文章名稱：Position:absolute屬性定位居中(position)
當(dāng)前網(wǎng)址：http://www.muchs.cn/news48/318448.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站制作、企業(yè)網(wǎng)站制作、云服務(wù)器、、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)