세로 가운데 정렬하는 방법

CSS Tutorial

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

text-align: center;

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

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

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

Contents

1 방법 1 - padding 속성 이용하기
2 방법 2 - margin 속성 이용하기
3 방법 3 - 표(table)처럼 만들기
4 방법 4 - Flex 이용하기

방법 1 - padding 속성 이용하기

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-wrap {
        border: 1px solid #444444;
        padding: 100px 0px;
      }
      h1 {
        padding: 20px 0px;
        background-color: #444444;
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="jb-wrap">
      <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>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-wrap {
        border: 1px solid #444444;
      }
      h1 {
        margin: 100px 0px;
        padding: 20px 0px;
        background-color: #444444;
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="jb-wrap">
      <h1>Lorem Ipsum Dolor</h1>
    </div>
  </body>
</html>

방법 3 - 표(table)처럼 만들기

표처럼 만들고 세로 가운데 정렬을 가운데로 할 수 있습니다. 높이를 정하기 쉽다는 장점이 있으나 코드가 길어진다는 단점이 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-table {
        display: table;
        width: 100%;
        height: 280px;
        border: 1px solid #444444;
      }
      .jb-table-row {
        display: table-row;
      }
      .jb-table-cell {
        display: table-cell;
        vertical-align: middle;
      }
      h1 {
        padding: 20px 0px;
        background-color: #444444;
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="jb-table">
      <div class="jb-table-row">
        <div class="jb-table-cell">
          <h1>Lorem Ipsum Dolor</h1>
        </div>
      </div>
    </div>
  </body>
</html>

방법 4 - Flex 이용하기

CSS3의 flex를 이용하면 쉽게 세로 가운데 정렬을 구현할 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-wrap {
        height: 280px;
        display: flex;
        align-items: center;
        border: 1px solid #444444;
      }
      h1 {
        width: 100%;
        padding: 20px 0px;
        background-color: #444444;
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="jb-wrap">
      <h1>Lorem Ipsum Dolor</h1>
    </div>
  </body>
</html>

Post Views: 3

CSS Tutorial

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

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.

CSS / Tutorial / ul, ol 가운데 정렬하는 방법

목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.

CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.

CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.

CSS / Tutorial / 마우스 호버 효과 / 텍스트 나오게 하는 방법

CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있습니다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.