将 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

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

有一些巧妙的解决方案可以实现垂直居中，还有一个最新的 CSS3 标准新增功能 - Flexbox

一些流行的技巧：

使用 CSS 表格单元布局

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