绝对定位元素的垂直和水平定位

Question

我有一个绝对定位的元素，我期望在垂直和水平方向上定位在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>

Answer 1

第一个选项为单和多行文本更好，第二个是良好的块。你决定你需要哪一个。