CSS: центрирование абсолютного позиционного текста внутри относительного родителя

Как я могу центрировать абсолютный позиционный текст внутри жидкости относительно родителя? Я пытаюсь использовать text-align:center для родительских элементов, но он всегда центрирует дочерний левый угол, а не сам элемент.

http://jsfiddle.net/sucTG/2/

Ответ 1

Дело в том, что position:absolute; изменяет ширину элемента, чтобы соответствовать его содержимому, и что text-align: center; центрирует текст в пределах ширины блока элемента. Поэтому, если вы добавите position: absolute;, не забудьте увеличить ширину элемента, иначе свойство text-align: center; будет бесполезным.

Лучший способ решить это - добавить width: 100%; и left: 0px; в разделе .text.

http://jsfiddle.net/27van/

Ответ 2

Обновление: то, что я поставил раньше, было неправильным/неправильным

http://jsfiddle.net/brJky/1/

Это должно быть МНОГО ближе к тому, что вы хотите?

Ваш текст относительный, а остальные элементы внутри контейнера абсолютны!

.text {
    color:#fff;
    padding:50px 0;
    display:block;
    position:relative;
}

.absolute {
    background:#f0f;
    height:25px; width:25px;
    position:absolute;
    top:36px; left:50%;
}

Ответ 3

Теперь вы можете добиться того, что вы хотите более элегантно с Flex. Смотрите, например:

HTML:

<div class="container">
  <div class="text">Your text</div>
</div>

CSS:

.container {
  position: relative; 
  width: 400px; /** optional **/
  height: 400px; /** optional **/
  background-color: red; /** optional **/
}

.text {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /** Y-axis align **/
  justify-content: center; /** X-axis align **/
}