Flexbox：水平和垂直居中

• Z时代
• 2024-01-10
• 分类：问答

如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字都彼此相邻（按行），并水平居中。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

回答：

我认为您想要以下内容。

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
<div class="flex-container">
    <div class="row">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

你的.flex-item元素应该是块级（div而非span）如果你想要的高度和顶部/底部填充，以正常工作。

另外，在上.row，将宽度设置为auto而不是100%。

您的.flex-container属性很好。

如果您希望.row垂直居中于视口中，请为html和分配100％的高度body，然后将页body边距清零。

请注意，.flex-container需要一个高度才能看到垂直对齐效果，否则，容器会计算出包围内容所需的最小高度，该最小高度小于此示例中的视口高度。

本flex-flow，flex-direction，flex-wrap性能会犯这样的设计更容易实现。我认为.row不需要容器，除非您要在元素周围添加一些样式（背景图像，边框等）。

以上是 Flexbox：水平和垂直居中 的全部内容， 来源链接： utcz.com/qa/421476.html