0
我有一個絕對定位的元素,我期望在垂直和水平方向上定位在div中間。我有兩種方法可以做到這一點,但我不確定哪一種方法可以歸入最佳方式。絕對定位元素的垂直和水平定位
.wrap {
height: 150px;
color: #000;
position: relative;
display: table;
width: 100%;
border: 1px solid #000;
}
.info-wrap {
display: table-cell;
vertical-align: middle;
}
.number {
text-align: center;
display: block;
font-size: 30px;
}
.text {
display: block;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 3px;
text-align: center;
}
.wrap1 {
height: 150px;
color: #000;
position: relative;
width: 100%;
border: 1px solid #000;
margin-top: 20px;
}
.info-wrap1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.number1 {
text-align: center;
display: block;
font-size: 30px;
}
.text1 {
display: block;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 3px;
text-align: center;
}
<div class="wrap">
<div class="info-wrap">
<span class="number">2500</span>
<span class="text">text text</span>
</div>
</div>
<div class="wrap1">
<div class="info-wrap1">
<span class="number1">2500</span>
<span class="text1">text text</span>
</div>
</div>