在使用CSS時，經常會遇到需要將圖片居中對齊的情況。在這篇文章中，我們將介紹如何使用CSS來快速實現圖片居中對齊。 首先，讓我們看一下HTML代碼：

<div class="wrapper">
<img src="example.png" alt="Example">
</div>

在這里，我們使用一個div元素包含了一張圖片。現在，我們需要將這張圖片居中對齊。 CSS中有幾種方法可以實現這個目的。下面是一些常用的方法： 1. 使用text-align屬性：

.wrapper {
text-align: center;
}
.wrapper img {
display: inline-block;
}

在這個例子中，我們將父元素的文本對齊方式設置為center，然后將圖片的顯示方式設置為inline-block，這樣圖片就會在div元素中居中對齊了。 2. 使用flexbox：

.wrapper {
display: flex;
justify-content: center;
align-items: center;
}

在這個例子中，我們將包含圖片的容器元素設置為flexbox布局，并將主軸和交叉軸的對齊方式都設置為center。這樣圖片就會在div元素中水平和垂直方向都居中對齊了。 3. 使用absolute定位：

.wrapper {
position: relative;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在這個例子中，我們將圖片的容器元素設置為相對定位，然后將圖片使用絕對定位方式放置到div元素的中央，并使用transform屬性來修正位置。 這些方法都可以實現圖片在div元素中的居中對齊，具體使用哪一個取決于你需要的效果和布局要求。 總結一下，在CSS中實現圖片的居中對齊有以下幾種方式： - 使用text-align屬性 - 使用flexbox布局 - 使用absolute定位 以上是本文的全部內容，希望對大家有所幫助。