将 div 放在另一个 div 的中间

Question

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

谁能告诉我一些解决方案

<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

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

有一些巧妙的解决方案允许垂直居中，CSS3 标准的最新补充是 Flexbox

一些流行的技巧：

使用CSSTable-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/

将 div 放在另一个 div 的中间

Putting div in the middle of another div

html

css

styles

stylesheet