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 설정 후 heightline-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%, marginheight의 절반만큼 마이너스로 중앙 정렬

<!-- 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-topwidth의 절반만큼 마이너스 설정,
margin-leftheight의 절반만큼 마이너스로 설정

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



'개발 > CSS' 카테고리의 다른 글

CSS 중앙정렬 가이드  (5) 2019.10.31
CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
  1. BlogIcon SONYLOVE 2017.04.11 14:38 신고

    가운데 정렬에 애먹었는데 도움이 되겠네요.

  2. ㅇㅇ 2017.10.24 23:03

    수평정렬이 잘 안 됐는데 flex 넣으니까 그냥 되네요.. flex 짱짱
    감사합니다.

  3. 2019.11.02 01:57

    비밀댓글입니다

    • 2019.11.04 15:08

      비밀댓글입니다

+ Recent posts