img在div中垂直居中
时间: 2023-06-22 22:23:44 浏览: 63
div垂直居中
要实现让一个 `img` 元素在父级 `div` 中垂直居中,可以通过以下 CSS 样式:
```css
div {
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
max-height: 100%;
}
```
使用 `display: flex` 将 `div` 设置为 flex 容器,然后使用 `align-items: center` 和 `justify-content: center` 将 `img` 元素在父级 `div` 中垂直和水平居中。为了防止 `img` 元素超出父级 `div` 的大小,使用 `max-width: 100%` 和 `max-height: 100%` 限制其最大宽度和高度。
阅读全文