CSS(가로, 세로) 중심 맞춤에 대한 완전한 가이드

수평 인라인(텍스트 및 링크 등)

.div{
    text-align: center;
}

수평 블록(div 및 목록 등)

.div{
    margin: 0 auto;
}

수직 인라인(텍스트 및 링크 등)
인라인 요소를 세로로 정렬하려면 두 가지 옵션이 있습니다.
첫 번째는 동일한 패딩 상단과 패딩 하단을 제공하는 것입니다.

.text{
    padding-top: 25px;
    padding-bottom: 25px;
}

두 번째는 줄 높이를 상자 높이와 동일하게 변경하는 것입니다. 그렇게 하려면 "공백"을 "nowrap"으로 사용해야 합니다. 그래서, 그것은 포장되지 않을 것입니다. 여러 줄을 만들고 세로로 정렬하려는 경우. 여전히 padding-top과 bottom을 동일하게 설정할 수 있습니다.

.text{
    height: 150px;
    line-height: 150px;
    white-space: nowrap;
}

수직 블록(div 및 테이블 등)
요소의 높이를 알고 있는 경우:

.parent{
   position: relative;
}
.child{
   position: absolute;
   top: 50%;
   height: 100px; /*This height is equal to parent's height */
   margin-top: -50px;
}

요소의 높이를 모르는 경우.

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

더 나은 방법
주저하지 말고 flexbox와 그리드 시스템을 사용하세요. 거의 모든 용도로 사용하고 있습니다. 가장 단순한 것조차도. 웹사이트 로드 속도가 느려지지는 않습니다. 모든 것을 중앙에 배치하고 다루기 쉬운 가장 좋은 방법입니다.

수평으로 센터링

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

수직으로 센터링

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

수평 및 수직 센터링

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

그리드를 사용하여 양방향으로 중앙에 배치

.parent{
   height: 500px;
   display: grid;
}
span{
   margin: auto;
}