요소를 빠르게 중앙에 배치하는 방법:

인프라 설정:

기본 스타일 설정:

 

1. Flex 레이아웃(플렉시블 박스 모델)

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

   

 2. 절대 위치 지정 및 마진

 .align-2{
           position:relative;
        }
 .align-2 .box{
          position:absolute;
          left:50%;
          top:50%;
          margin-left:-20px;
          margin-top:-20px;
        }

 3. 절대 위치 지정 및 변환,

 .align-3{
            position:relative;
         }
 .align-3 .box{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%, -50%);
         } 

4. 절대 위치 지정 및 마진 자동

 .align-4{
            position:relative;
         }
 .align-4 .box{
            position:absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            margin:auto;
         }

 

 5. 박스 모델 마진 

   .align-5 .box{
           margin-left:55px;
           margin-top:55px; 
          }

 6. 그리드 레이아웃(그리드 박스 모델)

     .align-6{
           display:grid;
         }
     .align-6 .box{
            align-self: center;
            justify-self: center;
          }

7. 텍스트를 중앙에 배치합니다.

            수평 중앙: text-align: center;

            세로 중앙: line-height: 150px; (요소 자체의 높이와 일치)

 .align-7{
            text-align: center;
            line-height: 150px;;
        }

최종 효과: