[HTML/CSS] div 안에 div 가운데 정렬하기 (가로, 세로)

 

지난번에는

<div> 안의 텍스트를 가로 세로 방향으로

가운데 정렬하는 방법을 알아보았습니다.

[HTML/CSS] DIV 안의 텍스트 가운데 정렬하기 (가로, 세로)

 

 

 

<div> 안에  <div>가 있을 경우

안에 있은 <div>를 가로, 세로 방향 가운데 정렬하는 방법을 정리해 보도록 하겠습니다.

 

 

아래와 같이 

파란 배경의 div안에 빨간 배경의 div가 있을 경우,

안쪽에 있는 div를 가로, 세로 방향 모두 가운데 정렬해 보도록 하겠습니다.

 

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
}

 

 

---

 

1. 가로 정렬

• margin
• justify-content (flexbox)

  margin  

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
  margin: auto;
}

 

margin: auto;

margin 속성값을 auto로 설정하면,

div 안의 요소들이 중앙정렬(가로방향) 됩니다.

 

 

  justify-content (flexbox)  

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
  display: flex;
  justify-content : center;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
}

 

justify-content: center;

바깥 div가 display:flex 인 경우에는,

justify-content 값을 center로 설정하여 가운데 정렬(가로) 합니다.

이때, justify-content는 안쪽에 있는 div가 아니라, 바깥쪽에 있는 div에 설정하는 것에 주의하세요.

 

 

 

2. 세로 정렬

• position, top, margin-top
• transform
• align-items (flexbox)

  position, top, margin-top  

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
  position: relative;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
  position: absolute;
  top: 50%;
}

 

.outer-div {

  position : relative

}

바깥쪽 div의 positon을 relative로 설정하였습니다.

 

.inner-div {

  position: absolute;

  top: 50%;

}

안쪽 div의 position을 absolute로 설정하고,

top 속성을 50%로 설정하여, div의 세로 위치를 위치를 가운데에 오도록 설정하였습니다.

바깥쪽 div의 position이 relative이고, 안쪽 div의 position이 absolute이므로,

안쪽 div는 바깥 div의 위치를 기준으로 50%(top에서 설정한) 위치에 위치하게 됩니다.

 

그런데, 우리가 원하는 것처럼

안쪽 div의 위치가 정확히 가운데 있지 않습니다.

왜냐하면, 안쪽 div의 왼쪽 상단 모서리를 기준으로 위치가 정해졌기 때문입니다.

 

 

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
  position: relative;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

 

margin-top: -50px;

안쪽 div에 margin-top 값을 추가했다.

margin-top에 들어갈 값은, (-(안쪽div의 높이/2)) 입니다.

margin-top에 음수값을 세팅하여, 

전체 높이의 절반만큼 div의 위치를 위로 올린 것입니다.

 

이렇게해서, 세로 가운데 정렬을 마쳤지만

이 방법은 margin-top 값을 설정해 주기 위해서

안쪽 div의 높이를 알아야 한다는 단점이 있습니다.

 

  transform  

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
  position: relative;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%)
}

 

transform: translate(0, -50%);

margin-top 속성대신,

transform 속성을 추가하였습니다.

transform 속성은 요소에 회전, 기울이기, 이동 등 시각적인 효과를 줄 수 있는 속성입니다.

translate는 가로, 세로 방향으로 요소를 이동시킬 때 사용하는 함수입니다.

translate의 첫번째 값은 가로이동 거리, 두번째 값은 세로 이동거리를 나타냅니다.

 

이렇게 하면, div의 크기에 따라 길이를 따로 계산해 주지 않아도 되고,

나중에 div의 높이가 변경되더라도, 높이 이외의 코드를 수정할 필요가 없습니다.

 

 

  align-items (flexbox)  

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
  display : flex;
  align-items : center;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
}

 

align-items: center;

바깥 div가 display:flex 인 경우에는,

align-items 값을 center로 설정하여 가운데 정렬(가로) 합니다.

이때, align-items는

가로 가운데 정렬(flexbox)과 마찬가지로

안쪽에 있는 div가 아니라, 바깥쪽에 있는 div에 설정하는 것에 주의하세요.

 

 

 

3. 가로. 세로 가운데 정렬

이제 앞의 내용을 바탕으로,

가로 세로 모두 가운데 정렬된 예시를 살펴보겠습니다.

앞의 내용들을 다시 정리한다고 생각하고 보시면 좋겠습니다.

 

• margin
• transform
• flexbox

  margin  

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
  position: relative;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
}

 

 

  transform  

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
  position: relative;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

 

  flexbox  

<div class='outer-div'>
  <div class='inner-div'>
  </div>
</div>

.outer-div {
  width : 300px;
  height : 300px;
  background-color : blue;
  display : flex;
  justify-content: center;
  align-items : center;
}

.inner-div {
  width : 100px;
  height : 100px;
  background-color: red;
}

 

---

 

<div> 안의 <div>를

가로 세로 방향으로 모두 가운데 정렬하는 방법을 알아보았습니다.