[CSS] 요소 수평, 수직 정렬 정리

요소 수평 / 수직 정렬 방법

1. 수평 정렬

a) Flexbox 사용:

<div class="container flex-center">
  <div class="element">Centered Element</div>
</div>

.flex-center {
  display: flex;
  justify-content: center;
}

b) Grid 사용:

<div class="container grid-center">
  <div class="element">Centered Element</div>
</div>

.grid-center {
  display: grid;
  justify-content: center;
}

c) Position 사용:

<div class="container position-center">
  <div class="element">Centered Element</div>
</div>

.position-center {
  position: relative;
}

.position-center .element {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

d) Table 레이아웃 사용:

<div class="container table-center">
  <div class="element">Centered Element</div>
</div>

.table-center {
  display: table;
  width: 100%;
}
.table-center .element {
  display: table-cell;
  text-align: center;
}

e) Margin Auto:

<div class="container">
  <div class="element margin-center">Centered Element</div>
</div>

.margin-center {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

2. 수직 정렬

a) Flexbox 사용:

<div class="container flex-vertical-center">
  <div class="element">Vertically Centered Element</div>
</div>

.flex-vertical-center {
  display: flex;
  align-items: center;

}

b) Grid 사용:

<div class="container grid-vertical-center">
  <div class="element">Vertically Centered Element</div>
</div>

.grid-vertical-center {
  display: grid;
  align-items: center;
}

c) Transform 사용:

<div class="container transform-vertical-center">
  <div class="element">Vertically Centered Element</div>
</div>

.transform-vertical-center {
  position: relative;
}

.transform-vertical-center .element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

d) Table 레이아웃 사용:

<div class="container table-vertical-center">
  <div class="element">Vertically Centered Element</div>
</div>

.table-vertical-center {
  display: table;
  height: 100%;
}
.table-vertical-center .element {
  display: table-cell;
  vertical-align: middle;
}

e) Line-height 사용 (단일 줄 텍스트):

<div class="container line-height-center">
  <div class="element">Vertically Centered Text</div>
</div>

.line-height-center {
  height: 100px;
}
.line-height-center .element {
  line-height: 100px;
}

f) 가상 요소 사용:

<div class="container pseudo-vertical-center">
  <div class="element">Vertically Centered Element</div>
</div>

.pseudo-vertical-center {
  height: 100px;
}
.pseudo-vertical-center::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.pseudo-vertical-center .element {
  display: inline-block;
  vertical-align: middle;
}

3. 수평 및 수직 동시 정렬

a) Flexbox 사용:

<div class="container flex-center-both">
  <div class="element">Centered Element</div>
</div>

.flex-center-both {
  display: flex;
  justify-content: center;
  align-items: center;
}

b) Grid 사용:

<div class="container grid-center-both">
  <div class="element">Centered Element</div>
</div>

.grid-center-both {
  display: grid;
  justify-content: center;
  align-items: center;
}

c) Position 및 Transform 사용:

<div class="container position-center-both">
  <div class="element">Centered Element</div>
</div>

.position-center-both {
  position: relative;
}

.position-center-both .element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

d) Table 레이아웃 사용:

<div class="container table-center-both">
  <div class="element">Centered Element</div>
</div>

.table-center-both {
  display: table;
  width: 100%;
  height: 100%;
}
.table-center-both .element {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

e) Grid (단일 셀):

<div class="container grid-center-single">
  <div class="element">Centered Element</div>
</div>

.grid-center-single {
  display: grid;
  place-items: center;
}

---

다음과 같은 방법으로 수평, 수직 정렬을 할 수 있다.

inline 요소의 경우, inline-block을 통해 나란히 배치하면서도, block 요소의 특성들을 사용할 수 있으니 적절히 변경해서 사용하자.