CSS / 세로 가운데 정렬하는 방법
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다.
1 |
text-align: center; |
요소의 가로 가운데 정렬은 margin 속성을 이용합니다.
1 2 |
margin-left: auto; margin-right: auto; |
그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요?
여러 가지 방법이 있는데, 그 중 세 가지를 소개해드립니다.
방법 1 - padding 속성 이용하기
바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .a { border: 1px solid #444444; width: 500px; padding: 100px 0px; } .b { border: 1px solid #444444; background-color: #444444; } h1 { text-align: center; color: #ffffff; } </style> </head> <body> <div class="a"> <div class="b"> <h1>Lorem Ipsum Dolor</h1> </div> </div> </body> </html> |
방법 2 - margin 속성 이용하기
안쪽 요소에 margin 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .a { border: 1px solid #444444; width: 500px; } .b { border: 1px solid #444444; background-color: #444444; margin: 100px 0px; } h1 { text-align: center; color: #ffffff; } </style> </head> <body> <div class="a"> <div class="b"> <h1>Lorem Ipsum Dolor</h1> </div> </div> </body> </html> |
방법 3 - display: table-cell 이용하기
바깥쪽 요소에
1 |
display: table-cell; |
을 추가하여 표의 셀처럼 만듭니다. 그리고
1 |
vertical-align: middle; |
을 추가하여 세로 정렬을 가운데로 만듭니다.
위 방법들과는 다르게, 바깥쪽 요소의 높이(height)를 정해줘야 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .a { border: 1px solid #444444; width: 500px; height: 300px; display: table-cell; vertical-align: middle; } .b { border: 1px solid #444444; background-color: #444444; } h1 { text-align: center; color: #ffffff; } </style> </head> <body> <div class="a"> <div class="b"> <h1>Lorem Ipsum Dolor</h1> </div> </div> </body> </html> |
CSS3의 flexible box를 이용하면 쉽게 세로 가운데 정렬을 구현할 수 있습니다. 하지만 IE 11부터 지원한다는 문제가 있습니다.