center with "flex"

重點

/* CSS reset */
:root {
    box-sizing: border-box;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
}

/* body */
body {

    /* flex */
    display: flex;
    justify-content: center;    /* ⭐️ 水平置中 */
    align-items: center;        /* ⭐️ 垂直置中 */
    
    min-height: 100vh;          /* ⭐️ 強迫使用全部高度 */
}

實例

Result

CSS

參考

📗 文章

• CSS Vertical Align - How to Center a Div, Text, or an Image (freeCodeCamp)