中心DIV水平和垂直

我有這樣的HTML結構：中心DIV水平和垂直

<div class="metaboxdet"> 
    <div class="metd"> 
     <h1>Hello World!</h1> 
    </div> 
</div>

http://jsfiddle.net/fvueL00n/2/

這裏的問題是我不能居中格「metd」水平和垂直方向。我已經嘗試調整頂部，底部，左側和右側，但它返回的結果不太準確。有沒有辦法讓我可以水平和垂直動態居中。

請檢查fiddle here以查看它的行動。謝謝！

來源

2015-06-13 Sara Ariadne Fontana

[這]（http://stackoverflow.com/questions/7 273338 /如何垂直對齊圖像裏面的div）應該有助於垂直對齊。 – Kiril

As discussed in this answer，你可以用height:100%和display:inline-block添加輔助元素與vertical-align:middle，並改變容器是display:inline-block與vertical-align:middle

.helper{ 
    display:inline-block; 
    height:100%; 
    vertical-align:middle; 
} 
/*container*/ 
.metd{ 
    vertical-align:middle; 
    display:inline-block; 
}

Here's the code in action

來源

2015-06-13 07:15:19 Billy

我寧願你的答案。 –

您可以使用表格佈局（你也應適用display:table;到.metaboxdet容器）：

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

JSFiddle

來源

2015-06-13 06:47:45 potashin

hey @suslov，你的代碼在JSFiddle中完美工作！謝謝。只是一個簡短的問題，它在不同的瀏覽器中工作嗎？它在Chrome中完美工作，但不在Firefox中。我是唯一有問題的人嗎？這裏是鏈接。 http://alphaomega.bendaggers.com/ –

@SaraAriadneFontana：這有點奇怪，在Safari中工作正常（問題是由於「高度」屬性，容器只是未達到最大高度）。 – potashin

可以使用flexbox，但它不支持older browsers。

.metaboxdet { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: row; 
}

供應商前綴留給讀者添加爲了完整性。

來源

2015-06-13 06:54:54 Achrome

這是我沒聽說過的東西。 Flexbox的。 –

您可以通過我添加到我的答案中的鏈接開始使用flexbox。 – Achrome

編輯您的標記：

<div style="display:table;" class="metaboxdet"> 
    <div style="display:table-cell;vertical-align:middle;" class="metd"> 
    <div style="margin-left:auto;margin-right:auto;"> 
     <h1>Hello World!</h1> 
    </div> 
    </div> 
</div>

和你的css是unchang編輯您可以刪除不需要的CSS：

.metaboxdet { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index:9; 
    text-align:center; 
    margin:0px auto; 
    background-color: #292484; 
    background-image: linear-gradient(135deg, #292484, #dc4225); 
    opacity: 0.6; 
} 

.metd {position:relative; margin:0px auto; width:70%; } 
.metd h1 {color: #FFF; font-size:40px; font-style:italic; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); line-height:1.2em;}

或檢查這個我已經編輯你搗鼓這個

https://jsfiddle.net/fvueL00n/2/

，如果你不希望有額外的div你可以對齊h1直接在div以及

更多參考howtocenterincss.com

來源

2015-06-13 07:27:48