在页面上垂直居中 flex 容器

Question

我目前正在尝试将 flex 容器在页面上垂直居中。

我想在页面中间显示一排 4 个圆圈。但是，常规方法做

margin:0;
position:absolute;
top: 50%;

丢弃 flex 并错误地显示圆圈。有谁知道如何使用 flex 进行这项工作？

这是示例代码，HTML:

<div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

CSS:

.circles {
  background: red;
  display:flex;
  flex-direction:row;
  width: 500px;
}

.circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: white;
}

输出：

我希望带有白色圆圈的红色区域显示在页面中央。预先感谢那些回复的人。

Answer 1

您错过的是“圆圈”的高度 class。因为没有它，浏览器就不知道在哪里垂直对齐它们。下面是代码片段。

.circles {
  background: red;
  display:flex;justify-content:center;
  width: 100%;
  align-items:center;
  height:100vh;
}

.circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: white;
}

<div class="circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

</div>

Answer 2

将您的内容包裹在 div 中并对其应用 display:flex，然后为其提供 div 整个视口高度并将其内容对齐到中心。

（如果您只想保留圆圈后面的红色背景而不是整个页面）

.cont{
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circles {
  background: red;
  display:flex;
  flex-direction:row;
  width: 500px;
  
}

.circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: white;
}

<div class="cont">
  <div class="circles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>

Answer 3

您可以简单地添加 body 选择器作为主容器，并使用 flexbox 属性，其中 align-items: center; 垂直居中，justify-content: center; 水平居中，记住 height: 100vh 属性.

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circles {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 500px;
}

.circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: white;
}

<div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Answer 4

您可以将边距属性设置为自动，以使元素在其容器内水平居中。

给圆圈的容器一个height和display: flex;，边距也会垂直居中。

.container {
  height: 100vh;
  display: flex;
}

.circles {
  background: red;
  display:flex;
  flex-direction:row;
  width: 500px;
  margin: auto;
}

.circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: white;
}

<div class="container">
  <div class="circles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>

在页面上垂直居中 flex 容器

Vertically center flex container on page

html

css

center

flexbox