中心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