<div class="center"> <img src="image.jpg" alt="图片" /> </div> .center { display: flex; justify-content: center; align-items: center; height: 100vh; }
首先,大家在HTML中将需要居中的图片包裹在一个
标签中,并赋予其一个名为“center”的class。该
标签将作为大家居中图片的容器。
接下来,大家使用CSS将该
容器设置为flex布局。通过设置justify-content: center和align-items: center属性,大家可以使图片在水平和垂直方向上都居中显示。height: 100vh的设置可以使图片在整个屏幕中居中。
这样,就可以实现通过CSS将图片放在页面中心的效果了。由于大家使用了flex布局,这种方法也可以适用于居中其他元素。