在我們日常Web開發中，會經常使用到CSS和DIV進行佈局，使其頁面更為的美觀，以及體驗效果更佳，那麼怎麼使div以各種居中方式展現出來呢，下面我們就來詳細總結div垂直居中的方法。
CSS實作div垂直居中的方法：
在說到這個問題的時候，也許有人會問CSS中不是有vertical-align屬性來設定垂直居中的嗎？即使是某些瀏覽器不支援我只需做少許的CSS Hack技術就可以啊！所以這裡我還要囉嗦兩句，CSS中的確是有vertical-align屬性，但是它只對(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的
、這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。
#在樣式佈局中，我們經常碰到需要將元素居中。透過css實作元素的水平居中較為簡單：對文本，只需要對其父級元素設定text-align: center;，而對p等區塊級元素，只需要設定其left和right的margin值為auto。要實現元素的垂直居中，有人會想到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，例如表格元素中的
、這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。因此我們需要透過別的方法去實現元素的垂直居中，下面我總結了幾種了常用垂直居中方法。
由於這個時候瀏覽器會以圖中綠點所示的位置為預設其實位置。要讓內容居中就要將margin-left和margin-top分別設定為負的寬度一半和搞度一半。
二、div水平垂直置中：
實現居中的方案有很多，這篇文章主要介紹了純CSS使用absolute配合margin的方案，margin-top為-(height / 2)，margin-left為-(width / 2)。當然也可以不用margin，也就是top為calc(100% - height) / 2，left為calc(100% - width) / 2，但建議可以不用calc()就不要用。
#css如何將p實作全螢幕水平垂直居中，本章節介紹如何將一個p元素在整個網頁內實現水平垂直居中效果，程式碼是最有說服力的，直接看程式碼。
div垂直居中相關問答：
#【div垂直置中相關文章】
以上是7種div垂直居中的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
