CSS居中的幾種方法

CSS居中是前端開發中常見的問題，往往需要我們根據不同的情況進行選擇。本文將介紹幾種常見的CSS居中方法，並給出代碼示例。讓我們一步步來看。

一、水平居中

1、text-align: center;

適用於行內元素及子元素居中，也可以用於絕對定位元素

    <div style="text-align: center">
        <p>This is centered text.</p>
    </div>

2、margin: 0 auto;

適用於塊級元素居中，且需要有固定寬度

    <div style="width: 200px; margin: 0 auto;">
        <p>This is centered text.</p>
    </div>

3、flexbox布局

適用於彈性盒子（Flexbox），不需要固定寬度

    <div style="display: flex; justify-content: center;">
        <p>This is centered text.</p>
    </div>

二、垂直居中

1、display: flex + align-items: center

適用於Flexbox布局，可以使子元素垂直居中

    <div style="display: flex; align-items: center; height: 200px;">
        <p>This is vertically centered text.</p>
    </div>

2、使用transform屬性

以絕對定位的方式實現元素垂直居中

    <div style="position: relative; top: 50%; transform: translateY(-50%);">
        <p>This is vertically centered text.</p>
    </div>

3、grid布局

適用於網格布局，也可以使子元素垂直居中

    <div style="display: grid; place-items: center; height: 200px;">
        <p>This is vertically centered text.</p>
    </div>

三、水平垂直居中

1、使用flexbox布局

    <div style="display: flex; justify-content: center; align-items: center; height: 200px;">
        <p>This is centered text.</p>
    </div>

2、使用定位和margin

    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <p style="margin: 0;">This is centered text.</p>
    </div>

3、使用grid布局

    <div style="display: grid; place-items: center; height: 200px;">
        <p>This is centered text.</p>
    </div>

四、表格中的居中

1、text-align: center + vertical-align: middle

    <table style="width: 100%; border-collapse: collapse;">
        <tr>
            <th style="text-align: center; vertical-align: middle;">Header 1</th>
            <th style="text-align: center; vertical-align: middle;">Header 2</th>
            <th style="text-align: center; vertical-align: middle;">Header 3</th>
        </tr>
    </table>

2、表格布局

    <table style="width: 100%; border-collapse: collapse; display: table;">
        <tr style="height: 200px; display: table-row;">
            <td style="display: table-cell; vertical-align: middle; text-align: center;">Cell 1</td>
            <td style="display: table-cell; vertical-align: middle; text-align: center;">Cell 2</td>
            <td style="display: table-cell; vertical-align: middle; text-align: center;">Cell 3</td>
        </tr>
    </table>

五、絕對定位元素的居中

1、transform + absolute + top: 50% + left: 50%

    <div style="position: relative; height: 200px;">
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <p>This is centered text.</p>
        </div>
    </div>

2、margin: auto + absolute + top: 0 + bottom: 0 + left: 0 + right: 0

    <div style="position: relative; height: 200px;">
        <div style="position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;">
            <p>This is centered text.</p>
        </div>
    </div>

3、display: flex + justify-content: center + align-items: center

    <div style="position: relative; height: 200px;">
        <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center;">
            <p>This is centered text.</p>
        </div>
    </div>

六、總結

以上是CSS居中的幾種方法，我們可以根據不同情況進行選擇。需要注意的是，有些方法只適用於指定情況，需要我們靈活運用，才能達到理想的效果。