Position:absolute屬性定位居中

2023-03-25 分類：網站建設

在web前端的日常工作中，經常會遇到設計師設計稿上不同模塊重疊顯示的需求。而要將兩個不同模塊重疊顯示通常是通過CSS中的position屬性來設置的。

前端定位
Position可取的值有 absolute、fixed、relative、static、inherit這些，具體說明可見下表：
前不久我在運用html+css來實現設計稿的前端效果工作中遇到了一個模塊上下左右居中的問題，最開始看到的這塊內容的時候，首先想到的是運用position:absolute;屬性來定位，雖然最終是成功實現了模塊上下左右居中的效果，但是過程卻有些波折。
顯示圖片1
舉個例子，要實現下圖的上下左右居中：
如果是正常來說，基本就是量出兩個模塊的高度，然后用margin屬性來設置使紅色模塊上下左右相對于灰色模塊居中，這里給的灰色模塊是600px * 600px的大小，紅色模塊是100px*100px的大小。CSS代碼實現如下：
<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>
這樣固然能實現紅色模塊居中的效果，但是卻不太理想，如果紅色模塊是灰色模塊的內容中獨立出來的呢？
在這里我是毫不猶豫的就選擇了position:absolute;這個屬性來實現的。這離將紅色模塊相對于灰色模塊獨立出來，這里讓灰色模塊填充文字，給紅色模塊設置透明度來對比。CSS實現代碼如下：
<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;
}
顯示效果2
效果如下：
雖然實現了這個效果，但是卻不甚滿意，要是不能固定灰色模塊的高度呢，要是不能固定紅色模塊的高度呢？
于是稍加思索后我寫出了下面這樣的解決方法（這里還是默認上面的寬高）：
<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>
效果3
效果圖如下：
問題來了，這里雖然上下是居中的，但是左右卻明顯的沒有居中，經過測試，是
left: 50%;
transform: translateX(-50%);
這兩個屬性沒有達成同等偏移。于是又改進了一下：
<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>
最終顯示效果
這樣就達到預期效果了。