Question

我有这个HTML结构：

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

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

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

请检查fiddle here以查看其实际效果。谢谢！

Answer 1

As discussed in this answer，您可以添加height:100%和display:inline-block vertical-align:middle的辅助元素，并使用{{1}将容器更改为display:inline-block }

vertical-align:middle

Here's the code in action

Answer 2

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

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

JSFiddle

Answer 3

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

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

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

Answer 4

将您的标记编辑为：

383 >python3 bug.py
kIOMasterPortDefault = c_void_p(None)
serial_port_iterator = c_void_p(None)

并且你的css没有变化你可以删除不需要的css：

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

或检查这个我编辑过你的小提琴

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

如果你不想要那个额外的div，你可以直接在.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;}中对齐h1

更多参考howtocenterincss.com

中心DIV水平和垂直

4 个答案: