css如何实现div页面居中显示图片,css怎么实现图片大于div时的居中显示
时间: 2024-03-15 07:46:57 浏览: 136
要实现div居中显示图片,可以使用以下CSS样式:
```css
div {
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}
```
这样设置后,图片会在div中水平垂直居中显示,同时保持其宽度和高度不超过div的大小。
如果图片的大小超过了div的大小,可以使用以下CSS样式:
```css
div {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
```
这样设置后,图片会在div中水平垂直居中显示,同时保持其宽度和高度不超过div的大小。如果图片的大小超过了div的大小,图片的部分内容会被裁剪。
阅读全文