无法将项目与引导程序 5 中的页面中心对齐 [重复]答案

【问题标题】：Cannot align items to centre of page in bootstrap 5 [duplicate]无法将项目与引导程序 5 中的页面中心对齐 [重复]
【发布时间】：2022-11-09 22:19:59
【问题描述】：

我正在尝试使用引导弹性框将项目与 html 中的页面中心对齐。由于某种原因， align-items-center 属性不起作用。

<!DOCTYPE html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
    <div class="container d-flex justify-content-center align-items-center">
        elment goes here
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

【问题讨论】：

这将水平居中，您是否也希望它垂直居中？
Take a look here
是的，我想将其水平和垂直居中，使其位于页面中间

标签： html alignment bootstrap-5

【解决方案1】：

您需要指定容器的高度，如果没有高度，垂直对齐将不起作用。您需要为元素添加vh-100。

<!DOCTYPE html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container vh-100 d-flex justify-content-center align-items-center">
        element goes here
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

【讨论】：

【解决方案2】：

你想达到什么目的？整个页面中只有一个元素？给你 :D

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

【讨论】：