CSS에서 요소를 중앙에 배치하는 다양한 방법

<div class="parent">
   <div class="child"></div>
</div>

위치 사용

.parent {
   position: relative;
}
.child { 
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

위치에 여백 사용

.parent {
   position: relative;
}
.child { 
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
//by giving top,left,right,bottom values as 0 now child's width and height is exact to parent.
   width: 800px; //assuming random width
   height: 200px; //assuming random height
   margin: auto; //margin auto works for both vertical and horizontal alignments
}

플렉스 사용

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

그리드 사용

.parent {
    display: grid;
    justify-content: center;
    align-items: center;
}

테이블 사용

.parent {
   display: table;
   width: 100px;
   height: 100px;
}
.child {
   display: table-cell;
   vertical-align: middle;
   width: 50px;
   height: 50px;
   text-align: center;
}

text-align을 사용하여 가로로 가운데 맞춤

.parent {
   display: block;
   text-align: center;
} 
.child {
   display: inline-block; //key point
}

line-height를 사용하여 세로로 가운데에 맞추기

.parent {
   height: 200px;
}
.child {
   line-height: 200px; //same value of parent height
}

여백을 자동으로 사용하여 수평으로 가운데 맞추기

.child {
   width: 50%;
   margin: 0 auto;
}