無法將絕對定位div內的文字居中

Question

我有2個div，一個叫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/

編輯：

如果您不需要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>