html - 将 div 放在另一个 div 的中间

Question

我创建了一个 html 页面并使用了 <center>使其位于 div 的中心，如下所示，但错误警报消息并未出现在 portlet-body 的中心

谁能告诉我一些解决办法

Plunker

<div class="portlet-body">
  <center>
    <div class="alert alert-error">
      <strong>Oh snap!</strong> Change a few things up and try submitting again.
    </div>
  </center>
</div>

Answer 1

你不能直接垂直居中任何元素，除非 - 所有 parent 的高度都是 100%。

有一些巧妙的解决方案可以实现垂直居中，CSS3 标准的最新成员之一是 Flexbox

一些流行的技巧:

使用 CSS Table-Cell 布局

<div class="table">
    <div class="table-cell">
        <!-- You apply 'vertical-align: center' property to table-cell class -->
    </div>
</div>

使用 Flex 布局

.container {
    display: flex;
    align-items: center;
}

进一步阅读:https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

使用幽灵元素

在这里推荐 Chris Coyer:https://css-tricks.com/centering-in-the-unknown/