在包含兄弟图像的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>