如何在不使用min-height的情况下在HTML页面中垂直居中div

需求与问题 #

需要在页面中垂直居中一个div，且禁止使用min-height属性。尝试使用Bootstrap的d-flex align-items-center justify-content-center类实现，但当前布局未达到预期的垂直居中效果。

尝试的代码片段 #

<div class="d-flex align-items-center justify-content-center">
  <div class="w-100">
    <p>My Content Here</p>
  </div>
</div>

原有代码结构 #

<div>
  <h2>My Content</h2>
</div>
<div class="d-flex align-items-center justify-content-center">
  <div class="w-100">
    <p>My Content Here</p>
  </div>
</div>
<div>
  <P>My Content</P>
</div>

完整HTML页面结构 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <base href="/cfm">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
  <script defer src="https://use.fontawesome.com/releases/v6.1.2/js/all.js" integrity="sha384-11X1bEJVFeFtn94r1jlvSC7tlJkV2VJctorjswdLzqOJ6ZvYBSZQkaQVXG0R4Flt" crossorigin="anonymous"></script>
</body>
</html>

解决方案 #

核心问题：flex容器默认高度由内容决定，没有占据足够的垂直空间，因此无法实现垂直居中。以下是几种不使用min-height的解决方法：

方法1：Bootstrap配合全屏高度设置 #

给flex容器添加h-100类，同时给html和body设置全屏高度：

html, body {
  height: 100%;
  margin: 0;
}

修改后的flex容器代码：

<div class="d-flex align-items-center justify-content-center h-100">
  <div class="w-100">
    <p>My Content Here</p>
  </div>
</div>

方法2：CSS Grid布局 #

直接用Grid实现全屏居中，无需依赖Bootstrap：

<style>
  .center-container {
    display: grid;
    place-items: center;
    height: 100vh;
  }
</style>
<div class="center-container">
  <div class="w-100">
    <p>My Content Here</p>
  </div>
</div>

方法3：绝对定位+transform #

经典的无依赖居中方案：

<style>
  .center-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<div class="center-container">
  <div class="w-100">
    <p>My Content Here</p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Praveen Impaxive