如何使用HTML和CSS实现图片在页面垂直水平双居中？

你的代码里.fondCarte容器没有设置高度，导致align-items: center无法发挥垂直居中的作用——flex布局的垂直对齐需要容器本身占据足够的垂直空间。

修改后的完整代码如下：

CSS #

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

.fondCarte {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.fond {
  width: 400px;
  aspect-ratio: 2 / 3;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

HTML #

<body>
  <div class="fondCarte">
    <img src="images/fond.jpg" alt="fond du cv" title="fond du cv" class="fond">
  </div>
</body>

说明： #

• 先给html和body设置height: 100%，并清除默认的margin和padding，让它们占满整个浏览器视口高度。
• 再给.fondCarte设置height: 100%，让这个flex容器的高度和视口一致，这样align-items: center就能把图片垂直居中了。

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