[CSS] 가로 세로 가운데 정렬

CSS 가로 세로 가운데 정렬

 

CSS로 텍스트나 엘리먼트를 부모 엘리먼트 내 

가로 세로 모두 가운데 정렬로 

style을 지정해야 하는 경우가 많다.

 

아래 가장 자주 사용하는 2가지 방법을 나열해 보았다.

 

첫번째 text-align 속성과 line-height 속성을 사용

[가운데 정렬할 컨텐츠가 텍스트 (position : inline)성질인 경우에만 가능]

엘리먼트명 {
    /* 가로축 가운데 정렬 */
    text-align : center;
    /* 세로축 가운데 정렬 */
    line-height : center;
}

 

 

두번째 flex를 통한 justify-content, align-items를 사용

엘리먼트명 {
    display : flex;
    /* 가로축 가운데 정렬 */
    justify-content : center;
    /* 세로축 가운데 정렬 */
    align-items : center;
}