CSS 중앙정렬 가이드

CSS 중앙정렬 가이드

수평정렬, 수직정렬에 대해 찾아보다가 잘 설명된 페이지가 있어 포스팅
예제 코드는 정확히 필요한 부분만 가져왔기 때문에 폰트,배경 색 같은 코드는 빠져있음

 

수평정렬 ( horizontally )

1. inline 요소를 수평 중앙정렬 시

부모 요소에 text-align: center 적용

<!-- HTML -->
<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
  <a href="#">Four</a>
</nav>

<!-- CSS -->
<style>
nav {
  text-align: center;
}
</style>

부모 요소인 nav 태그에 text-algin: center를 적용하면
인라인 태그이면서 자식 태그인 a 태그들은 중앙정렬이 된다.

 

2. block 요소를 수평 중앙정렬 시

block 요소가 한개일 때, 두개 이상일 때를 나누어 알아보자.

 

2-1. 1개의 block 요소를 수평 중앙정렬 할 때

block 요소는 width 속성을 따로 설정하지 않으면
자동으로 width: auto가 적용되므로 width 설정 후 margin: 0 auto 설정

<!-- HTML -->
<div class="center">
  I'm a block level element and am centered
</div>

<!-- CSS -->
<style>
.center {
  width: 200px;
  margin: 0 auto;
}
</style>

여기서 margin: 0 auto는 위아래 마진은 0 좌우는 남는 여백의 반반씩 가져간다는 뜻

 

 

2-2. 2개 이상의 block 요소를 수평 중앙정렬 할 때

부모요소에 text-align: center, 자식 요소의 각각에 display: inline-block을 적용해주면 된다.

<!-- HTML -->
<main class="inline-block-center">
  <div> I'm an element that is block-like with my siblings and we're centered in a row. </div>
  <div> I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div>
  <div> I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<!-- CSS -->
<style>
  .inline-block-center {
    text-align: center;
  }
  .inline-block-center div {
    display: inline-block;
    width: 200px;
    text-align: left;
  }
</style>

display: inline-block을 사용할 때는 width 또는 max-width 값을 설정해줘야 퍼지지 않고 레이아웃이 잡힘.
위의 코드와 같이 작성하면 이미지의 위쪽과 같이 높이가 제각각인 블럭이 만들어지는데
이를 해결하기 위해서는 height, vertical-align: top을 주면
이미지의 아래와 같이 일정한 모양을 잡을 수 있다.

 

수직정렬 ( vertically )

1. inline 요소를 수직 중앙정렬 할 때

1-1. 한 줄일 경우

disaplay: block 설정 후 height와 line-height를 같은 값으로 설정하면 된다.
이 때 white-space: nowrap 속성으로 자동 줄바꿈이 안되도록 해야한다.

<!-- HTML -->
<main>
  <span> I'm a centered line. </span>
</main>

<!-- CSS -->
<style>
main span {
  display: block;
  width: 50%;
  height: 100px;
  line-height: 100px;
  padding: 20px;
  white-space: nowrap;
}
</style>

 

1-2. 여러 줄일 경우

부모 요소에 display: table, 자식 요소에 display: table-cell, vertical-align: middle 사용

<!-- HTML -->
<div class="center">
  <span>I'm vertically centered multiple lines of text in a CSS-created table layout.</span>
</div>

<!-- CSS -->
<style>
  .center {
    display: table;
  }
  .center span {
    display: table-cell;
    vertical-align: middle;
  }
</style>

 

2. block 요소를 수직 중앙정렬 할 때

2-1. 정렬할 요소의 높이를 알 때

부모 요소에 position: relative, 자식 요소에 position: absolute를 적용해
height 값을 설정하고 top: 50%, margin을 height의 절반만큼 마이너스로 중앙 정렬

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
    height: 300px;
  }
  .center div {
    position: absolute;
    top: 50%;
    heigth: 100px;
    margin-top: -50px;
  }
</style>

 

2-2. 정렬할 요소의 높이를 모를 때

2-1 번의 margin-top 대신 transform: translateY(-50%)를 사용하면 된다.

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
    height: 300px;
  }
  .center div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

 

동시에 수평, 수직 정렬을 하고 싶을 때

1. 정렬할 요소의 width와 height를 알 때

부모 요소에 position: relative, 자식 요소에 position: absolute 적용 후
top: 50%, left: 50%, margin-top을 width의 절반만큼 마이너스 설정,
margin-left를 height의 절반만큼 마이너스로 설정

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
  }
  .center div {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
  }
</style>

2. 정렬할 요소의 width와 height를 모를 때

1번의 margin-top, margin-left 대신 transform: translateY(-50%, -50%)를 사용하면 된다.

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
  }
  .center div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

 

마무리

개인적으로 공부한 내용을 정리한 것이기 때문에 반말을 사용한 점 양해 부탁드립니다.
잘못된 부분이나 피드백이 있으시다면, 댓글에 남겨주시면 감사하겠습니다!