CSS如何居中一張圖片在HTML中

CSS是我們前端工程師最為常用的工具之一。在網頁設計中，經常會使用到圖片。那麼如何在HTML中將圖片居中呢？本文將圍繞該問題從多個方面進行詳細闡述。

一、使用text-align屬性居中

使用text-align屬性可以對圖片進行簡單的水平居中。具體做法是在包含圖片的父元素上添加樣式：

    <div style="text-align:center;">
        <img src="picture.jpg">
    </div>

該方法適用於父元素的寬度大於或等於圖片寬度的情況。如果父元素寬度小於圖片寬度，則圖片將左對齊。

二、使用margin屬性居中

使用margin屬性可以實現水平和垂直方向的居中。具體做法是在包含圖片的父元素上添加以下樣式：

    <div style="text-align:center;">
        <img src="picture.jpg" style="margin: auto;">
    </div>

這個方法同樣適用於父元素的寬度大於或等於圖片寬度的情況。如果父元素寬度小於圖片寬度，則圖片將溢出父容器。

三、使用flexbox布局居中

使用flexbox布局可以在任意尺寸的父元素中居中內容。假設我們要使包含圖片的父元素水平和垂直居中，則將其樣式設置如下：

    <div style="display: flex; align-items: center; justify-content: center;">
        <img src="picture.jpg">
    </div>

這個方法同樣適用於父元素的寬度小於圖片寬度的情況。如果需要在水平方向上使圖片不溢出，則可以增加如下樣式：

    <img src="picture.jpg" style="max-width: 100%;">

四、使用position屬性居中

使用position屬性可以精確控制圖片的位置。假設我們要水平垂直居中的圖片大小為200px x 200px，將其樣式設置如下：

    <div style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <img src="picture.jpg" style="width: 200px; height: 200px;">
    </div>

該方法可以在任意父元素中實現水平垂直居中，不受父元素尺寸限制。

五、使用table-cell居中

使用table-cell布局可以將多個元素在列中對齊，可以很方便地實現垂直和水平方向上的居中。將包含圖片的標籤的display屬性設置為table-cell以及其父元素的display屬性設置為table和vertical-align屬性設置為middle。具體做法如下：

    <div style="display: table; height: 100%;">
        <div style="display: table-cell; vertical-align: middle; text-align: center;">
            <img src="picture.jpg" style="max-width: 100%;">
        </div>
    </div>

該方法適用於父元素尺寸大於或等於圖片尺寸的情況。當父元素尺寸小於圖片尺寸時，圖片將溢出父元素。

綜上所述，我們可以使用不同的方法在HTML中居中一張圖片，具體方法選擇根據實際情況而定。以下為完整代碼示例：

    <div style="text-align:center;">
        <img src="picture.jpg">
    </div>

    <div style="text-align:center;">
        <img src="picture.jpg" style="margin: auto;">
    </div>

    <div style="display: flex; align-items: center; justify-content: center;">
        <img src="picture.jpg">
    </div>

    <div style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <img src="picture.jpg" style="width: 200px; height: 200px;">
    </div>

    <div style="display: table; height: 100%;">
        <div style="display: table-cell; vertical-align: middle; text-align: center;">
            <img src="picture.jpg" style="max-width: 100%;">
        </div>
    </div>