[CSS] 텍스트 요소 가운데 정렬하기 (horizontally, vertically)

텍스트 요소 가운데 정렬하기 (horizontally, vertically)

들어가며 

• CSS를 이용하여 간단하게 텍스트 요소를 수직적/수평적으로 가운데 정렬할 수 있다.

 

방법

① 모든 텍스트를 수평적으로(Horizontally) 가운데 정렬할 경우

• 요소의 text-algin 속성을 center 로 설정해준다.

body {
    text-align: center;
}

 

② 텍스트를 수직적으로(Vertically) 가운데 정렬할 경우

padding 속성 이용하기

• 요소의 padding 속성을 num1_size 0 num1_size  로 설정해준다.

div {
    padding: 50px 0 50px;
}

 

line-height 속성 이용하기

• 요소의 line-height 속성과 height 속성을 비슷하게 설정해준다.

div {
    line-height: 150px;
    height: 150px;
}

 

position, transform 속성 이용하기

• 요소의 position, top, left, transform, margin 속성을 다음과 같이 설정해준다.

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

 

Flexbox 이용하기

• Flexbox 는 즉각적으로 반영되고, margin 을 계산하지 않아도 되기 때문에 텍스트 요소를 수직적(수평적)으로 가운데 정렬하기 위해 자주 사용된다.
• 우선 부모 요소의 display 속성을 flex 로 설정해야 한다.
• 그 다음 align-items 와 justify-content 속성을 center 로 설정해준다.

div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
}

 

참고

• https://blog.hubspot.com/website/center-text-in-css

How to Center Text in CSS