div怎么让一个img居中

可以使用CSS来让一个img居中显示在其父元素中，具体的方法如下：

HTML代码：

<div class="container">
  <img src="image.jpg" alt="图片">
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container img {
  max-width: 100%;
  max-height: 100%;
}

解释：

- `display: flex` 将容器设置为flex布局
- `justify-content: center` 将子元素水平居中
- `align-items: center` 将子元素垂直居中
- `max-width: 100%` 和 `max-height: 100%` 可以保证图片不超出父元素的范围，同时保持图片原始比例。

这样设置后，img元素就会在其父元素中水平和垂直居中显示了。

相关问题

让div中的img居中

可以使用以下样式使 `div` 中的 `img` 居中：

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

这将使 `div` 成为一个弹性容器，并且将图像水平和垂直居中在其中。如果你只想在水平方向上居中图像，可以将 `align-items` 属性设置为 `center`。

div中的img居中

以下是两种在div中将img居中的方法：

1. 使用vertical-align属性：

<div class="method1">
  <span class="tiptop"></span>
  <img class="test" src="img/Dota2.jpg" alt="dota2">
</div>

<style>
.method1 {
  text-align: center;
}
.tiptop {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
img {
  vertical-align: middle;
}
</style>

2. 使用flex布局：

<div class="title">
  <img src="img/Dota2.jpg" alt="dota2">
</div>

<style>
.title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title img {
  width: 35%;
}
</style>