水平和垂直居中 DIV

Question

我有这个 HTML 结构：

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

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

这里的问题是我无法将 div "metd" 水平和垂直居中。我试过调整顶部、底部、左侧和右侧，但结果 return 不太准确。有什么方法可以动态地水平和垂直居中吗

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

Answer 1

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

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

JSFiddle

Answer 2

您可以使用 flexbox, but it will not support older browsers.

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

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

Answer 3

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

Answer 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;}

或者检查这个我已经把你fiddle编辑成这个

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

如果您不想要那个额外的 div，您也可以直接在 div 中对齐 h1

更多参考howtocenterincss.com

水平和垂直居中 DIV

Center DIV Horizontally and Vertically

html

css

alignment

centering