Question

孩子水平居中，但不是垂直居中。我认为这是因为example-container需要一个高度集。如果我希望它集中在整个页面上怎么办？

请参阅以下代码段

＆＃13;

.example-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.example-child {
  width: 100px;
  height: 100px;
  background-color: orange;
}

＆＃13;

<div class="example-container">
  <div class="example-child">
    <p>Sample Content...</p>
  </div>
</div>

＆＃13;

Answer 1

默认情况下，它的高度只会和孩子一样大。添加height: 100vh或适用于您的布局的任何内容。

body { margin: 0; }

.example-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.example-child {
  width: 100px;
  height: 100px;
  background-color: orange;
}

<div class="example-container">
  <div class="example-child">
    <p>Sample Content...</p>
  </div>
</div>

Answer 2

在页面上水平和垂直居中单个子div

使用transform代替flexbox

，可以通过更少的标记和更广泛的浏览器支持来完成

＆＃13;

.example-container {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  background-color: orange;
}

＆＃13;

<div class="example-container">
    <p>Sample Content...</p>
</div>

＆＃13;

在页面上水平和垂直居中单个子div

2 个答案: