要在CSS中使图片居中显示，可以使用flexbox或者grid布局。以下是两种方法的示例代码：
使用Flexbox居中显示图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.center-flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使用视口高度来使容器充满整个屏幕 */
}
</style>
</head>
<body>
<div>
<img src="path/to/your/image.jpg" alt="Centered Image">
</div>
</body>
</html>
使用Grid居中显示图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.center-grid {
display: grid;
place-items: center;
height: 100vh; /* 使用视口高度来使容器充满整个屏幕 */
}
</style>
</head>
<body>
<div>
<img src="path/to/your/image.jpg" alt="Centered Image">
</div>
</body>
</html>
在这两个例子中，我们创建了一个类.center-flex和.center-grid，这两个类使用flexbox和grid布局来居中图片。图片将被置于页面的中央，不管屏幕尺寸如何变化。