水平和垂直居中 DIV答案

【问题标题】：Center DIV Horizontally and Vertically水平和垂直居中 DIV
【发布时间】：2015-08-29 05:12:57
【问题描述】：

我有这个 HTML 结构：

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

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

这里的问题是我无法将 div“metd”水平和垂直居中。我尝试调整顶部、底部、左侧和右侧，但它返回的结果不太准确。有没有办法让我可以动态地水平和垂直居中。

请查看fiddle here 以查看它的实际效果。谢谢！

【问题讨论】：

This 应该有助于垂直对齐。

标签： html css alignment centering

【解决方案1】：

您可以使用表格布局（您还应该将display:table; 应用于.metaboxdet 容器）：

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

JSFiddle

【讨论】：

嘿@suslov，您的代码在 JSFiddle 中完美运行！谢谢。只是一个简单的问题，它可以在不同的浏览器中工作吗？它在 chrome 中完美运行，但在 Firefox 中却不行。只有我有问题吗？这是链接。 alphaomega.bendaggers.com
@SaraAriadneFontana：这有点奇怪，在 Safari 中运行良好（问题是由于 height 属性，容器没有完全占据高度）。

【解决方案2】：

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

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

供应商前缀留给读者添加以确保完整性。

【讨论】：

那是我没听说过的。弹性盒。
您可以通过我添加到答案中的链接开始使用 flexbox。

【解决方案3】：

As discussed in this answer，你可以用height:100%和display:inline-block用vertical-align:middle添加一个辅助元素，用vertical-align:middle把容器改成display:inline-block

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

Here's the code in action

【讨论】：

【解决方案4】：

将您的标记编辑为：

<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 没有改变，你可以删除不需要的 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，你也可以直接在 div 中对齐 h1

更多信息请参考howtocenterincss.com

【讨论】：