html - 在包含同级图像的 div 中居中文本

Question

我试图在一个 div 中垂直和水平居中一些文本。 div 还包含同级图像。

.div-table {
  display: table;
  vertical-align: middle;
  z-index: 2
}
.div-table-cell {
  display: table-cell;
}
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  color: red;
}

<div>
  <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" height="250" width="250" />
  <div class='container'>
    <div class='div-table'>
      <div class='div-table-cell'>
        <p>my text</p>
      </div>
    </div>
  </div>
</div>

我已经准备了一个 jsfiddle，其中包含我所在的位置:https://jsfiddle.net/p3wur6qj/1/

我以为有:

display: table-cell;

和

display: table;

围绕包含的 div 可以实现这一点，但它没有。

Answer 1

我建议使用 flexbox 使文本水平和垂直居中。

.container {
  display: inline-block; /*same size as the image*/
  position: relative;
}
.content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: red;
  display: flex;
  justify-content: center; /*center horizontally*/
  align-items: center; /*center vertically*/
}

<div class='container'>
  <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" height="200" width="200" />
  <div class='content'>
    <p>my text</p>
  </div>
</div>

或者，使用 position + transform 技巧。

.container {
  display: inline-block;
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /*position -50% of the element size*/
  color: red;
}

<div class='container'>
  <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" height="200" width="200" />
  <div class='content'>
    <p>my text</p>
  </div>
</div>