Bootstrap 5 中垂直居中的 div

Question

Bootstrap 5 中垂直居中的 div

如何在 Bootstrap 5 中垂直居中？\n它应该在和屏幕结束div之前的内容之间的中间对齐。div

\n

尝试过这个：

\n

    <div>some content</div>\n    <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">\n        <div>div that should be centered</div>\n    </div>\n

Run Code Online (Sandbox Code Playgroud)\n

它使页面比实际长度长。div\xc2\xb4t 看起来不居中。

\n

Answer 1

Nen*_*vic 5

你可以这样做：

div用具有 100% 屏幕宽度和高度的内容包裹所有内容。
用于flex-grow-1第二个，div这样它就占据了剩余的高度并将所有内容居中。

<!doctype html>
<html lang="en">
  <head>
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  <body>
    <div class="d-flex flex-column min-vh-100 min-vw-100">
      <div>This div is not centered.</div>
      <div class="d-flex flex-grow-1 justify-content-center align-items-center">
        <div>This div is centered.</div>
      </div>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，7 月前
查看次数：	13230 次
最近记录：	1 年，9 月前