CSS怎樣使圖片居中顯示 在網頁設計中，圖片是非常重要的元素，然而在網頁中，我們也會發現圖片的位置并不總是居中的。那么，該怎么辦呢？接下來，我們將介紹如何使用CSS來使圖片居中顯示。 首先，在HTML中將圖片放入一個div元素： `````` 接著，在CSS中使用以下代碼來設置圖片的位置： ``` .img-container { display: flex; /* 設置為flex布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 設置高度充滿整個視窗 */ } .img-container img { max-width: 100%; /* 防止圖片超出容器 */ max-height: 100%; /* 防止圖片超出容器 */ } ``` 以上代碼中，我們使用了flex布局來實現居中。`justify-content: center`使圖片水平居中，`align-items: center`使圖片垂直居中。同時，設置容器的高度為100vh，使容器充滿整個視窗。最后，通過`max-width`和`max-height`屬性防止圖片超出容器。 如果需要將容器設置為固定寬度和高度，可以將容器設置為絕對定位，并使用`left`和`top`屬性使其居中： ``` .img-container { position: absolute; /* 絕對定位 */ left: 50%; /* 向左移動50% */ top: 50%; /* 向上移動50% */ transform: translate(-50%, -50%); /* 平移到中心 */ width: 500px; /* 自定義寬度 */ height: 500px; /* 自定義高度 */ } ``` 以上代碼中，我們使用絕對定位，并將容器向左移動50%和向上移動50%。最后，使用`transform`屬性將其平移到中心。通過自定義寬度和高度，可以將圖片設置為固定大小。 總結 通過上述方法，我們可以使用CSS來使圖片居中顯示。如果你想在你的網頁中實現圖片的居中顯示，以上代碼將是一個不錯的起點。