레이아웃 가운데 정열

FROM  https://30-seconds.github.io/30-seconds-of-css/

//////----------------------------------------------

.grid-centering {

  display: grid;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

<div class="grid-centering">

  <div class="child">Centered content.</div>

</div>

///-------------------------------------

<div class="parent">

  <div class="child">Centered content</div>

</div>

.parent {

  border: 1px solid #333;

  height: 250px;

  position: relative;

  width: 250px;

}

.child {

  left: 50%;

  position: absolute;

  top: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

}