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

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

.container {
  
  /* ⭐️ flex */
  display: flex;
  justify-content: center;  /* ⭐️ 水平置中 */
  align-items: center;      /* ⭐️ 垂直置中 */
  
  height: 400px;
  border: 2px solid #006100;
  background-color: orange;
}

.centered-element {
  margin: 1em;;
  padding: 1em;
  border: 1px solid black;
  background-color: rgba(255,255,255, 0.5);
}

參考

📗 文章

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