在制作網頁時，經常需要將圖片放置在頁面的中心位置以達到更好的設計效果。下面我們來介紹一種使用CSS來實現將圖片放在頁面中央的方法。
<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布局，這種方法也可以適用于居中其他元素。
上一篇css將圖片角變圓