CSS 레이아웃 - 수직, 수평 정렬

중앙 정렬 요소

블록 요소를 가로로 중앙에 배치하려면(예: <div>) margin: auto; 을 사용합니다.

요소의 너비를 설정하면 요소의 가장자리가 컨테이너 가장자리로 확장되지 않습니다.

그런 다음 요소가 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에서 균등하게 분할됩니다.

예제 1
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Note: width 특성이 설정되지 않은 경우(또는 100%로 설정됨) 중심 정렬은 영향을 미치지 않습니다.

텍스트 중앙 정렬

텍스트의 중심을 요소 안으로 맞추려면 text-align: center;를 사용합니다.

예제 2
.center {
  text-align: center;
  border: 3px solid green;
}

이미지 중앙 정렬

이미지의 중심을 맞추려면 왼쪽과 오른쪽 여백을 auto로 설정하고 block 요소로 만듭니다.

예제 3
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

float을 이용한 왼쪽 오른쪽 정렬

요소를 정렬하는 또 다른 방법은 float 속성을 사용하는 것입니다.

예제 4
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

clearfix hack

요소가 해당 요소를 포함하는 요소보다 높고 해당 요소가 떠 있는 경우 컨테이너 밖으로 넘칩니다. “clearfix hack”을 사용하여 이 문제를 해결할 수 있습니다.

그런 다음 clearfix hack을 포함 요소에 추가하여 이 문제를 해결할 수 있습니다.

예제 5
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

padding을 이용한 수직 중앙 정렬

CSS에서 요소를 수직으로 중앙에 배치하는 방법은 여러 가지가 있습니다. 간단한 해결책은 위와 아래 padding을 사용하는 것입니다.

예제 6
.center {
  padding: 70px 0;
  border: 3px solid green;
}

수직 및 수평으로 중심을 맞추려면 padding 및 text-align: center;를 사용합니다.

예제 7
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

line-height를 이용한 수직 중앙 정렬

또 다른 방법은 height 속성과 동일한 값을 가진 line-height 속성을 사용하는 것입니다.

예제 8
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* 텍스트에 줄이 여러 개 있는 경우 다음을 추가합니다. */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

position과 tansform을 이용한 수직 중앙 정렬

padding과 line-height가 옵션이 아닌 경우, 또 다른 해결책은 위치 지정과 transform 속성을 사용하는 것입니다.

예제 9
.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

flexbox을 이용한 수직 중앙 정렬

Flexbox를 사용하여 사물을 중앙에 배치할 수도 있습니다. Flexbox는 IE10 이전 버전에서는 지원되지 않습니다.

예제 10
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}