가운데 정렬 모음

• 이번에는 가장 골머리를 썩히는 요소의 '가운데 정렬'을 할 수 있는 다양한 방법에 대해 정리해 보겠습니다

Flexbox

• justfy-content: center (주축/수평 정렬)
• align-items: center
  (교차축/수직 정렬/item 1줄일 때, 여러 줄일때는 align-content 활용)

<div class="flex-center">
  가운데 정렬!
</div>

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px solid #000;
}

Grid

• flex 보다 간단하게 작성 가능
• place-items: center는 justify-items와 align-items를 동시에 설정한다

<div class="grid-center">
  가운데 정렬!
</div>

.grid-center {
  display: grid;
  place-items: center;
  height: 200px;
  border: 1px solid #000;
}

Position

• 구형 브라우저에 동작 가능

<div class="position-center">
  <div>가운데 정렬!</div>
</div>

.position-center {
  position: relative;
  height: 200px;
  border: 1px solid #000;
}
.position-center div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Margin

• 수평 정렬은 margin: 0 auto
• 수직 정렬은 position, transform 활용

<div class="margin-center">
  가운데 정렬!
</div>

.margin-center {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  position: relative;
  top: 50%; 
  transform: translateY(-50%);
  border: 1px solid #000;
}

Table

• 구형 브라우저에서 동작 가능

<div class="table-center">
  <div>가운데 정렬!</div>
</div>

.table-center {
  display: table;
  width: 100%;
  height: 200px;
  border: 1px solid #000;
  text-align: center; /* 텍스트 수평 정렬 */
  vertical-align: middle; /* 텍스트 수직 정렬 */
}
.table-center div {
  display: table-cell;
  vertical-align: middle;ㄴ