垂直和水平定位，带绝对定位元件

Question

我有一个绝对定位元素，我希望垂直和水平位于div的中间。我有两种方法可以做到这一点，但我不确定哪一种方法会被归类为最佳方式。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于单行和多行文本，第一个选项更好，第二个选项适用于块。你决定你需要哪一个。