Html 水平和垂直居中DIV

我有这个HTML结构：

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

你好，世界！

这里的问题是我不能水平和垂直地将div“metd”居中。我尝试过调整顶部、底部、左侧和右侧，但结果不太准确。有没有一种方法可以让我在水平和垂直方向上动态居中

请检查以查看它的运行情况。谢谢

您可以使用表布局（您还应该将

display:table；

应用于

.metaboxdet

容器）：

您可以使用表格布局（还应将

显示：表格；

应用于

.metaboxdet

容器）：

您可以使用，但它不支持

为完整起见，供应商前缀留给读者添加。

您可以使用，但它不支持

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

您可以添加高度为100%的辅助元素

和高度为
的
显示：内联块
的
垂直对齐：中间
，并将容器更改为
显示：内联块
的
垂直对齐：中间

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

，您可以添加高度为100%的辅助元素和高度为垂直对齐：中间对齐的辅助元素，并将容器更改为垂直对齐：中间对齐的辅助元素

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

将您的标记编辑为：

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

或者看看这个我编辑过你摆弄这个


如果您不希望有额外的div，也可以直接在
div
中对齐
h1

有关更多信息，请参见将标记编辑为：

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

或者看看这个我编辑过你摆弄这个


如果您不希望有额外的div，也可以直接在
div
中对齐
h1

有关更多信息，请参阅“垂直对齐”部分。应该有助于垂直对齐。这是我没听说过的。flexbox。你可以从我在答案中添加的链接开始使用flexbox。这是我没有听说过的。flexbox。你可以从我添加到答案中的链接开始使用flexbox。嘿@suslov，你的代码在JSFIDLE中运行得非常好！谢谢jsut一个简单的问题，它在不同的浏览器中工作吗？它在chrome中工作得很好，但在firefox中却不行。我是唯一有问题的人吗？这是链接@SaraAriadneFontana：这有点奇怪，在Safari中工作得很好（问题是由于
高度
属性，容器没有达到全高）。嘿@suslov，你的代码在JSFIDLE中工作得很好！谢谢jsut一个简单的问题，它在不同的浏览器中工作吗？它在chrome中工作得很好，但在firefox中却不行。我是唯一有问题的人吗？这是链接@SaraAriadneFontana：这有点奇怪，在Safari中效果很好（问题是由于
高度
属性，容器没有达到全高）。
.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;}