[CSS] 박스 가운데 정렬 방법

웹 페이지를 구성하다 보면 가운데 정렬을 해야할 때가 오는데요!

저도 많이 해맸었고, 쉽게 이해하고 사용할 수 있도록 정리를 해보려고 합니다!

---

가로 가운데 정렬 하기

1.  margin 사용하기

이 방법을 사용하려면 정렬하려는 요소의 넓이를 반드시!! 꼭! 지정해 줘야합니다. 그렇지 않으면 가운데 정렬이 되지 않아요

블럭 요소의 경우 요소의 넓이가 최대한 넓어지려는 특성이 있습니다.

.box{
  widht: 200px;
  height: 200px;
  margin: 0 auto;
}

2.  absolute 사용하기

absolute는 위치 상 부모요소의 기준으로 배치가 됩니다. 꼭 위치 상 부모요소를 확인 해줘야합니다.

주의!  부모 요소의 position의 값이 반드시 relative일 필요는 없습니다.

.parent-box{
  width: 600px;
  height: 250px;
  background-color: orange;
  position: relative;
}
.child-box{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

요소의 위치의 기준점은 요소의 왼쪽 상단 부분 (0, 0) 입니다.

부모의 요소의 넓이가 600px , 높이가 250px일때 position값을 주지않은 자식 요소의 위치는 이곳이 됩니다.

자식 요소에 position 값을 주고 left 50%를 하면 다음 그림과 같이 됩니다.

자식 요소의 기준점인 왼쪽 상단이 부모 요소의 넓이의 절반 만큼 오게 됩니다.

가운데 정렬을 하기 위해선 자식 요소의 넓이 절반 만큼 margin-left를 옮겨 줘야합니다.

현재 자식의 요소의 넓이는 200px이므로 -100px 만큼 요소를 옮겨주면 가운데 정렬이 됩니다!

transform: translateX(-100px);

transform: translateX(-50%);

위의 함수로도 같은 모양을 만들 수 있습니다.

 

translateX는 X축 이동을 나타내는 함수입니다.

transform: translateX(-50%); 

-> 자식 요소의 절반 만큼 x축으로 이동

.parent-box{
  width: 600px;
  height: 250px;
  background-color: orange;
  position: relative;
}
.child-box{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); 
}

3. inline-block 사용하기

부모 요소에 text-align을 center로 설정해주고 자식요소를 inline-block으로 설정해주면 됩니다.

.box{
  width: 600px;
  height: 250px;
  background-color: orange;
  text-align: center;
}
.item{
  width: 200px;
  height: 200px;
  background-color: #3FAF82;
  display: inline-block;
}

4. flex 사용하기

부모 요소에 display를 flex로 변경해주기 justify-ceontent center

.box{
  width: 600px;
  height: 250px;
  background-color: orange;
  display: flex;
  justify-content: center;
}
.item{
  width: 200px;
  height: 200px;
  background-color: #3FAF82;
}

---

세로 가운데 정렬 하기

1.  padding 사용하기

부모의 height 대신 padding을 이용해 세로 가운데 정렬을 할 수 있습니다.

.box{
  background-color: orange;
  width: 200px;
  padding: 50px 0;
}
.item{
  width: 200px;
  height: 200px;
  background-color: #3FAF82;
}

2.  absolute 사용하기

absolute는 위치 상 부모요소의 기준으로 배치가 됩니다. 꼭 위치 상 부모요소를 확인 해줘야합니다.

주의!  부모 요소의 position의 값이 반드시 relative일 필요는 없습니다.

해당 부분은 가로 정렬 부분과 동일 합니다.

transform: translateY(-100px);

transform: translateY(-50%);

위의 함수로도 같은 모양을 만들 수 있습니다.

.box{
  background-color: orange;
  width: 200px;
  height: 300px;
  position: relative;
}
.item{
  width: 200px;
  height: 200px;
  background-color: #3FAF82;
  position: absolute;
  top: 50%;
  margin-top: -100px;
}

3.  flex 사용하기

부모 요소 display를 flex로 변경해주고 align-items center

.box{
  width: 200px;
  height: 300px;
  background-color: orange;
  display: flex;
  align-items: center;
}
.item{
  width: 200px;
  height: 200px;
  background-color: #3FAF82;
}

---

가운데 정렬 하기

1. flex 사용하기

.box{
  background-color: orange;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item{
  width: 200px;
  height: 200px;
  background-color: #3FAF82;
}

2.  absolute 사용하기

.box{
  background-color: orange;
  width: 300px;
  height: 300px;
  position: relative;
}
.item{
  width: 200px;
  height: 200px;
  background-color: #3FAF82;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

.box{
  background-color: orange;
  width: 300px;
  height: 300px;
  position: relative;
}
.item{
  width: 200px;
  height: 200px;
  background-color: #3FAF82;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* x, y */
}

2. padding 사용하기

.box{
  background-color: orange;
  width: 200px;
  padding: 50px;
}
.item{
  height: 200px;
  background-color: #3FAF82;
}

---

이렇게 있습니다! 제가 정리 못한 방법도 있을 수 있습니다.

조금이라도 도움이 되셨으면 좋겠습니다!