尝试将卡片置于页面中央

Question

我无法将卡片置于网页中央。我使用 Flex 将其居中，但它只是水平对齐，而不是垂直对齐。

我期望的输出：

我得到的输出：

我的代码供参考：

.container{
      display: flex;
      justify-content: center;
      align-items: center;
    }

html code:

<div class="container">
    <div class="card">
      <div class="qr">
        <img src="./images/image-qr-code.png" alt="qr code which leads to Frontend Mentor">
            <div class="content">
            <h3>Improve your front-end skills by building projects</h3>
            <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
          </div>
        </div>
    </div>
  </div>

我错过了什么吗？ 我相信我已经使用了正确的逻辑（对齐内容和对齐项目），VSCode 的实时预览扩展是否有问题？

Answer 1

您需要确保包含 .container 类的父容器具有允许垂直对齐的定义高度。如果父容器的高度折叠为零，则对齐可能无法按预期工作。这是您要寻找的 CSS。 html, 身体 { 高度：100%； } 。容器 { 显示：柔性； 调整内容：居中； 对齐项目：居中； 高度：100%； } .qr { 宽度：300px； 文本对齐：居中； }