无法使用 CSS 布局将 div 居中

Question

出于某种原因，每当我尝试使用 Flexbox 使用 align-items 和 justify-content 将 div 居中时，它只会使 div 水平居中。不过，我仍然可以将文本居中。提前致谢。

这是我的代码。

P.S。如果看起来容器已经垂直居中，则尝试展开代码段。

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&display=swap');
.outer-box {
  display:flex;
  justify-content:center;
  align-items:center;
}
.inner-box {
  background-color:#00c2fc;
  width:250px;
  height:130px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: 35px;
  word-wrap: break-word;
  font-family:lato;
  font-weight:bold;
}

.box-text {
  text-align:center;
  padding:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="outer-box">
    <div class="inner-box">
        <p class="box-text">
          I am not centered :(
        </p>
    </div>
  </div>

</body>
</html>

Answer 1

您的外部 div 正在占用块级别 space，但不占用视口级别 space，这正是您想要的。居中正在发生，但仅相对于父项。

将 min-height: 100vh 添加到父级，.outer-box，您就会得到想要的结果。

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&display=swap');
.outer-box {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 100vh;
}
.inner-box {
  background-color:#00c2fc;
  width:250px;
  height:130px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: 35px;
  word-wrap: break-word;
  font-family:lato;
  font-weight:bold;
}

.box-text {
  text-align:center;
  padding:10px;
}

html, body { margin: 0; }

<div class="outer-box">
  <div class="inner-box">
    <p class="box-text">
      I am centered :)
    </p>
  </div>
</div>

Answer 2

它居中，但父级的高度由内容本身设置。

如果您希望它以视口为中心，您需要提供视口的父级高度。

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&display=swap');
.outer-box {
  display:flex;
  justify-content:center;
  align-items:center;
  height: 100vh;
}
.inner-box {
  background-color:#00c2fc;
  width:250px;
  height:130px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: 35px;
  word-wrap: break-word;
  font-family:lato;
  font-weight:bold;
}

.box-text {
  text-align:center;
  padding:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="outer-box">
    <div class="inner-box">
        <p class="box-text">
          I am not centered :(
        </p>
    </div>
  </div>

</body>
</html>

无法使用 CSS 布局将 div 居中

Can't center a divs using CSS layouts

css

flexbox