在网站的设计中，图片一直扮演着不可或缺的角色。然而，当图片的尺寸大于浏览器窗口时，如何让图片居中显示呢？下面我们就来学习一下如何使用CSS来居中显示图片。

img {
display: block; /* 让图片变为块级元素 */
margin: 0 auto; /* 设置左右外边距为自动，实现水平居中 */
}

代码中我们给图片设置了块级元素的属性，这样才能实现左右自动居中的效果。同时，我们给图片设置了左右外边距为自动，上下外边距为0，这样就可以让图片在水平方向上居中显示。

当然，有时候在页面设计中，我们会将图片放在一个容器中，这样更方便对图片进行布局和样式调整。在这种情况下，我们需要将上述代码略作修改，如下所示：

.container {
display: flex; /* 使用flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.container img {
max-width: 100%; /* 设置图片最大宽度 */
height: auto; /* 高度根据比例自适应 */
}

上述代码中，我们给容器设置了flex布局，让容器内的元素水平和垂直都居中显示，并且我们还设置了图片的最大宽度为100%，这样可以让图片在超出容器大小时，保持比例自适应缩放。

通过上述两种方法，我们可以轻松实现网页中的图片居中显示效果，让网站更加美观大方。