Невозможно центрировать текст внутри абсолютного положения div

Question

У меня есть 2 divs, один называется info-holder, а другой называется info-content.

Информационный держатель имеет relative позиционирование, тогда как информационный контент имеет absolute позиционирование.

Содержимое содержит (или будет содержать) элементы абзаца и заголовка, но они выравниваются влево, когда я хочу, чтобы они были выровнены по центру.

Любая идея, как я могу это исправить?

Вот то, что я до сих пор: http://jsfiddle.net/2egL00y5/

Answer 1

Вам нужно добавить width: 100% к элементам:

.info-content { 
    width: 100%; 
} 

h1 { 
    width: 100%; 
} 

FIDDLE: https://jsfiddle.net/lmgonzalves/2egL00y5/1/

EDIT:

Если вы не нужен position: absolute, единственный стиль, который вы необходимо применить это:

.info-content { 
    text-align: center; 
} 

Снятие и стили в h1.

FIDDLE: https://jsfiddle.net/lmgonzalves/2egL00y5/4/

Answer 2

Вот что я сделал:

.info-holder { 
    position: relative; 
    height: 420px; 
    max-height: 420px; 
    width: 29%; 
    margin: 0 auto; 
    padding: 0; 
    background: rgba(0, 0, 0, 0.5); 
} 
.info-content { 
    text-align: center; 
} 
h1 { 
    margin: 0 auto; 
    display: inline-block; 
} 

Answer 3

альтернатива - transform: translate

.info-holder { 
 
\t position: relative; 
 
\t height: 420px; 
 
\t max-height: 420px; 
 
\t width: 29%; 
 
\t display: inline-block; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
\t text-align: center; 
 
\t background: rgba(0, 0, 0, 0.5); 
 
} 
 
.info-content { 
 
\t position: absolute; left: 50%; 
 
\t text-align: center; 
 
    -webkit-transform: translate(-50%, 0); 
 
    -ms-transform: translate(-50%, 0); 
 
    transform: translate(-50%, 0); 
 
} 
 
h1 { 
 
\t margin: 0 auto; \t 
 
\t text-align: center; 
 
}

<div class="info-holder"> 
 
    <div class="info-content"> 
 
     \t <h1>Hello</h1> 
 
    </div> 
 
</div>