CSS / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다.

text-align: center;

1	text-align: center;

요소의 가로 가운데 정렬은 margin 속성을 이용합니다.

margin-left: auto;
margin-right: auto;

1 2	margin-left: auto; margin-right: auto;

그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요?

여러 가지 방법이 있는데, 그 중 세 가지를 소개해드립니다.

방법 1 - padding 속성 이용하기

바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.

<!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>

<!doctype html>

<head>

<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>

<h1>Lorem Ipsum Dolor</h1>

</div>

</body>

</html>

방법 2 - margin 속성 이용하기

안쪽 요소에 margin 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.

<!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>

<!doctype html>

<head>

<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>

<h1>Lorem Ipsum Dolor</h1>

</div>

</body>

</html>

방법 3 - display: table-cell 이용하기

바깥쪽 요소에

display: table-cell;

1	display: table-cell;

을 추가하여 표의 셀처럼 만듭니다. 그리고

vertical-align: middle;

1	vertical-align: middle;

을 추가하여 세로 정렬을 가운데로 만듭니다.

위 방법들과는 다르게, 바깥쪽 요소의 높이(height)를 정해줘야 합니다.

<!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>

<!doctype html>

<head>

<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>

<h1>Lorem Ipsum Dolor</h1>

</div>

</body>

</html>

CSS3의 flexible box를 이용하면 쉽게 세로 가운데 정렬을 구현할 수 있습니다. 하지만 IE 11부터 지원한다는 문제가 있습니다.

CSS

CSS / 가운데 정렬

CODING FACTORY