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

除非直接将任何元素垂直居中 - 所有父母都有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/

使用Ghost元素

请参阅Chris Coyer：https://css-tricks.com/centering-in-the-unknown/

把div放在另一个div的中间

1 个答案: