display：flex 图片不居中

你可以使用 CSS 来实现图片居中的效果。以下是一种常见的方法：

HTML 代码：

<div class="container">
  <img src="your-image.jpg" alt="Your Image">
</div>

CSS 代码：

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

.container img {
  max-width: 100%;
  max-height: 100%;
}

上述代码中，我们使用了一个父容器 `.container`，并设置其为 Flex 布局。通过 `justify-content: center;` 和 `align-items: center;` 属性，我们将图片水平和垂直居中显示。为了保证图片不超过父容器的尺寸，我们给图片添加了 `max-width: 100%;` 和 `max-height: 100%;` 属性。

你可以将上述代码添加到你的网页中，替换 `your-image.jpg` 为你自己的图片路径，然后你的图片就能居中显示了。

相关问题

display: flex后垂直居中

使用display: flex可以实现垂直居中的效果。具体步骤如下：

1. 在父容器上设置display: flex，将其变为一个flex容器。
2. 使用align-items属性来设置垂直方向的对齐方式。将align-items的值设置为center，即可实现垂直居中。

以下是一个示例代码：

<style>
    .container {
        display: flex;
        align-items: center;
        /* 其他样式属性 */
    }
</style>

<div class="container">
    <!-- 子元素 -->
</div>

这样设置后，子元素就会在垂直方向上居中显示。

display: flex; 垂直居中

以下是使用display: flex;实现垂直居中的方法：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 设置容器高度 */
}

这里的.container是一个包含需要垂直居中的元素的父容器。通过设置display: flex;将父容器变为弹性容器，然后使用justify-content: center;将子元素水平居中，使用align-items: center;将子元素垂直居中。最后，通过设置容器的高度来控制垂直居中的效果。