Центрирование текста внутри 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; 

вокруг содержащихся divs достигнет этого, но это не так.

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>