盒子水平垂直居中

頁面主體結構

整體 html 結構

<article>
        <div></div>
    </article>

css 結構

* {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        article {
            width: 100%;
            height: 100%;
        }

        div {
            width: 200px;
            height: 150px;
            background-color: skyblue;
        }

---

盒子水平居中

• margin

div {
            margin: 0 auto;
        }

• text-align

article {
            text-align: center;
        }

        div {
            display: inline-block;
        }

(缺點：article內部文字也會水平居中，需消除影響)

---

盒子垂直居中

• transform

div {      
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            /* 在知道div高度的狀況下可使用下面的方式代替上面一行 */
            /* margin-top: -75px; */
        }

---

盒子水平垂直居中

• flex 佈局

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

• grid 佈局

article {
            display: grid;
            grid-template-rows: 1fr 150px 1fr;
            grid-template-columns: 1fr 200px 1fr;
        }

        div {
            grid-area: 2 / 2 / 3 / 3;
        }

• 絕對定位

div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }