我如何垂直和水平對齊一個div爲

頁

中心已經閱讀了有關如何在頁面上中心的元素或DIV這似乎工作相當的一些技巧，但沒有。我甚至做了的jsfiddle嘗試一下：我如何垂直和水平對齊一個div爲

我敢肯定，這必須是一個簡單的答案，但我不能弄明白。任何幫助將非常感激。

<body> 
    <div class="intro-area"> 
    <div class="intro-text"> 
     <p>This is a paragraph I want to center on the page.</p> 
     <p>This is another paragraph I want to center on the page.</p> 
    </div> 
    </div> 
</body> 

.intro-area { 
    background-color: #e7e7e7; 
    display: table; 
    text-align: center; 
} 

.intro-text { 
    display: table-cell; 
    vertical-align: middle; 
}

此外，在JSFiddle中，我通過JavaScript中的window.height函數動態拉動.intro區域div的高度。這就是它在我的項目中的使用方式。

來源

2014-01-21 Kevin Stachura

請看看現有的答案提出新問題之前。請參閱：http://stackoverflow.com/search?q=vertical+and+horizontal+align+on+page –

http://stackoverflow.com/questions/20926514/make-thw-two-consecutive-div-in-該中心的最容器/ 20926932＃20926932 – BuddhistBeast

大方的感覺今天：http://jsfiddle.net/aLye7/2/; fyi：js不需要這樣做。 – brouxhaha

對於這個特定的情況下，添加以下迫使HTML，身體和含有div來的100％的高度：

html, body, .intro-area { 
    height: 100%; 
}

而下面從HTML和身體移除默認填充和餘量：

html, body { 
    margin: 0; 
    padding: 0; 
}

沒有JavaScript需要使用此方法。

DEMO

來源

2014-01-21 21:40:08 brouxhaha

我如何垂直和水平對齊一個div爲

回答

相關問題