親要素に対して子要素を上下左右中央寄せする

display: flexを使用した子要素の単純な上下左右中央寄せです。

HTML(Pug)

.container
  .box child element

CSS(SCSS)

.container {
  align-items: center;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1ch;
  width: 70%;
  height: 300px;
  margin: 30px auto 0;
  position: relative;
  .box {
    background-color: #fff;
    text-align: center;
    padding: 30px;
    max-width: 300px;
  }
}