CSS 頁面圖片居中

隨著 Web 技術的發展，人們對網頁設計的要求越來越高。特別是在追求簡潔、美觀和易用的前提下，居中圖片已經成為了網頁設計中的一個常用技巧。本文將介紹如何使用 CSS 來將圖片居中。

CSS 居中是一種通過設置元素的 display 屬性將其移動到父元素的中心位置的技術。使用 CSS 將圖片居中的方法非常簡單，只需要將圖片的 display 屬性設置為 "block"，同時設置其位置屬性為 "居中"，即可實現圖片的居中效果。

下面是一個示例代碼：

```html

<div class="container">

</div>

```css

.container {

position: relative;

width: 300px;

height: 200px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

display: block;

在上面的代碼中，我們使用了 CSS 的 "position" 屬性來設置圖片的位置。使用 "top" 和 "left" 屬性分別設置圖片的垂直和水平居中位置。同時，我們使用了 "transform" 屬性來設置圖片的居中效果。最后，我們使用 "display" 屬性將圖片設置為 "block"，使其可見。

通過以上代碼，我們可以將一張圖片成功地居中在網頁中。當然，也可以使用其他樣式來實現更加復雜的效果，比如陰影、邊框等。

居中圖片是網頁設計中一個常用的技巧，通過使用 CSS 可以輕松實現。希望本文可以幫助到您，讓您更好地掌握 CSS 居中圖片的技巧。