CSS 중앙 정렬하는 방법

CSS 중앙 정렬하는 방법

 

• 자기 자신이 중앙으로 갈 경우

➡️ position, margin: auto

 

• 부모 요소가 자식 요소를 중앙으로 보낼 경우

➡️ flex, grid, place-items 

수직 수평을 개별적으로 할 경우

    /* Flex */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Grid */
    display: grid;
    justify-content: center;
    align-items: center;

전체 가운데 정렬을 할 경우

    /* place-item */
    display: grid;
    place-items:  center;

 

• 수평 중앙 정렬할 때 블록요소 vs 인라인(인라인블록)

➡️ 블록 요소는 자기 자신에게 margin: auto

➡️ 인라인(인라인블록)는 부모요소또는 상위요소에 texst-align: center;

 

• 자기 자신과 인접해 있는 요소와 수직 중앙을 맞출 경우

➡️ vertical-align: 값; transform:  translateY(값);