Original article: How to Center Anything with CSS - Align a Div, Text, and More

중앙 정렬은 CSS에서 가장 어려운 것 중 하나입니다.

방법 자체를 이해하는 것은 그다지 어렵지 않지만, 너무나도 다양한 방법이 존재한다는 사실이 중앙 정렬을 어렵게 합니다.

중앙 정렬 하는 방법은 HTML 요소에 따라 혹은 수평 중앙 정렬인지, 수직 중앙 정렬인지에 따라 달라질 수 있습니다.

이 튜토리얼에서는 다양한 요소를 수평, 수직 및 상하좌우로 중앙에 배치하는 방법에 대해 살펴보겠습니다.

CSS로 무엇이든 중앙 정렬하는 방법을 설명하는 대화형의 비디오(Interactive Scrim)

수평 중앙 정렬하는 방법

수평 중앙 정렬하는 것은 대체적으로 수직 중앙 정렬하는 것보다 쉽습니다. 다음은 수평 중앙 정렬할 수 있는 몇 가지 일반적인 요소와 이를 사용하는 다양한 방법입니다.

CSS에서 Text-Align Center 속성으로 텍스트를 중앙 정렬하는 방법

텍스트 또는 링크를 수평 중앙에 정렬하려면, text-align 속성을 사용하여 값을 center로 주면 됩니다.

<div class="container">
  <p>Hello, (centered) World!</p>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* 수평 중앙 정렬하기 */
  text-align: center;
}
CSS를 통해 Hello, World 텍스트가 중앙 상단에 위치한 모습

CSS에서 Margin Auto로 Div를 중앙 정렬하는 방법

div처럼 블록 레벨 요소(화면 전체를 차지하는 요소 —옮긴이)를 가지고 있는 태그를 중앙 정렬하기 위해선 margin 속성을 사용하여 값을 0 auto로 주면 됩니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수평 중앙 정렬하기 */
  margin: 0 auto;
}
CSS를 통해 빨간 상자가 중앙 상단에 위치한 모습

Flexbox를 사용하여 Div를 수평 중앙 정렬하는 방법

Flexbox는 가장 현대적으로 페이지를 중앙 정렬하는 방법이며 반응형 레이아웃을 이전보다 훨씬 쉽게 디자인할 수 있습니다. 그러나 인터넷 익스플로러와 같은 일부 레거시 브라우저에서는 전적으로 지원되지 않습니다.

Flexbox를 사용하여 요소를 수평 중앙에 정렬하려면 부모 요소에 display: flex 그리고 justify-content: center를 적용하기만 하면 됩니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 자식 요소(.child)를 중앙 정렬하기 */
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}
CSS를 통해 빨간 상자가 중앙 상단에 위치한 모습

수직 중앙 정렬하는 방법

Flexbox와 같은 현대적인 방법 없이 요소를 수직 중앙 정렬하는 것은 꽤 번거로운 일이 될 수 있습니다. 이번엔 예전 방식으로 수직 중앙 정렬을 먼저 실행 해보고, Flexbox를 사용하는 방법도 함께 살펴보겠습니다.

CSS Absolute 배치와 Margin을 마이너스 값으로 설정하여 Div를 수직 중앙 정렬하는 방법

이 방법은 요소를 수직으로 중앙정렬하는데 오랫동안 사용되어 왔습니다. 이 경우에는 중앙에 정렬하려는 요소의 높이를 알아야 합니다.

먼저 부모 요소의 position속성을  relative로 설정합니다.

그 다음 자식 요소의 position속성을 absolute로 설정하고 top 또한 50%로 설정합니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
}
CSS를 통해 빨간 상자가 왼쪽 중앙 조금 아래에 위치한 모습

하지만 이것은 자식 요소의 상단 가장자리만을 수직으로 중앙에 맞춥니다.

자식 요소 전체를 수직 중앙에 정렬하려면 margin-top속성을 -(자식 요소 높이의 절반)으로 설정합니다.

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* 이 요소 높이의 절반 */
}
CSS를 통해 빨간 상자가 왼쪽 중앙에 위치한 모습

CSS의 Transform과 Translate를 사용하여 Div를 수직 중앙 정렬하는 방법

중앙에 정렬하려는 요소의 높이를 모른다면(또는 알더라도), 이것은 꽤나 유용한 방법입니다.

이 방법은 위의 Margin을 마이너스 값으로 설정하는 방법과 아주 유사합니다. 부모 요소의 position속성을  relative로 설정합니다.

자식 요소의 경우 position속성을 absolute로 설정하고 top을 50%로 설정합니다. 이제 Margin을 마이너스 값으로 설정하여 자식요소를 중앙 정렬하는 대신에, 단순히 transform: translate(0, -50%)를 사용하면 됩니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
CSS를 통해 빨간 상자가 왼쪽 중앙에 위치한 모습

translate(0, -50%)은 translateX(0)와 translateY(-50%)의 줄임말입니다. 또한 transform: translateY(-50%)을 사용하여 자식 요소를 수직으로 중앙에 정렬할 수도 있습니다.

Flexbox를 사용하여 Div를 수직 중앙 정렬하는 방법

요소를 수평 중앙 정렬 하는 것처럼, Flexbox를 사용하면 요소를 수직으로 중앙에 정렬하는 방법은 정말 쉽습니다.

요소를 수직 중앙 정렬하려면 부모 요소에 display: flex와 align-items: center를 적용합니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 수직 중앙 정렬하기 */
  display: flex;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}
CSS를 통해 빨간 상자가 왼쪽 중앙에 위치한 모습

상하좌우 정중앙 정렬하는 방법

CSS Absolute 배치와 Margin을 마이너스 값으로 설정하여 Div를 상하좌우 정중앙 정렬하는 방법

이 방법은 요소를 수직으로 중앙에 정렬하는 위의 방법과 매우 유사합니다. 그와 마찬가지로 중앙에 정렬하려는 요소의 너비와 높이를 알아야 합니다.

부모 요소의 position 속성을 relative로 설정합니다.

그 다음에, 자녀의 position속성을 absolute 그리고 top을 50%로, left를 50%로 설정합니다. 이것은 단지 자식 요소의 왼쪽 상단 모서리를 수직 및 수평으로 중앙에 맞춥니다.

자식 요소 전체를 중앙에 정렬하려면 자식 요소 높이의 절반 값에 마이너스를 붙인 margin-top과 자식 요소 너비의 절반 값에 마이너스를 붙인 margin-left를 적용합니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 상하좌우 정중앙 정렬하기 */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* 자식 요소 전체를 중앙 정렬하기 위해, 상단 및 왼쪽 margin을 마이너스 값으로 적용하기 */
}
CSS를 통해 빨간 상자가 정중앙에 위치한 모습

CSS의 Transform과 Translate를 사용하여 Div를 상하좌우 정중앙 정렬하는 방법

중앙에 정렬하려는 요소의 높이와 너비를 정확히 모르고, Flexbox 또한 사용할 수 없을 경우에 이 방법을 사용하여 요소를 수직 및 수평으로 중앙에 정렬 할 수 있습니다.

먼저, 부모 요소의 position속성을  relative로 설정합니다.

다음에, 자녀의 position속성을 absolute 그리고 top을 50%로, left를 50%로 설정합니다.

마지막으로, 자식 요소 전체를 중앙에 정렬하기 위해서 transform: translate(-50%, -50%)로 설정합니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 상하좌우 정중앙 정렬하기 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
CSS를 통해 빨간 상자가 정중앙에 위치한 모습

Flexbox를 사용하여 Div를 상하좌우 정중앙 정렬하는 방법

Flexbox는 요소를 상하좌우 정중앙 정렬하는 방법 중, 가장 쉬운 방법입니다.

이 방법은 단지 앞서 보았던 두 가지 Flexbox 사용법의 조합일 뿐입니다. 자식 요소를 수직과 수평으로 중앙에 정렬하려면 justify-content: center와 align-items: center를 부모 요소에 적용하면 됩니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 상하좌우 정중앙 정렬하기 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}
CSS를 통해 빨간 상자가 정중앙에 위치한 모습

여러분들은 누구 못지않게 요소들을 중앙에 정렬할 수 있는 모든 방법을 배웠습니다. 자 이제 많은 것들을 중앙 정렬해 보세요.