[HTML/CSS] div(혹은 특정 요소) 가운데 정렬

 

 

 제일 처음 HTML과 CSS를 배우기 시작하고, 클론코딩을 시도하려 했을때 가장 애를 먹었던 부분이 컨텐츠들을 정렬하고 위치를 내가 원하는 대로 두는것이 어렵게 다가왔습니다. 지금도 다른 영역을 배우다가 다시 앞에 보여지는 부분들 즉 이러한 컨텐츠들을 구성하려니 또 다시 처음하는 것처럼 가물가물하여 블로그에 정리해봅니다. 여러방법이 있으나 absolute를 이용한 방식은 개인적으로 별로인 것 같아 다른 2가지 정도씩으로 정리해보겠습니다.

div 가운데 정렬 하는 방법

div 영역을 중앙에 배치하는 방향에 따라 다양한 방법이 존재합니다. 다음과 같이 정렬 방향에 따라 케이스를 나눠서 방법을 소개해드리도록 하겠습니다.

정렬 방향

• div의 가로만 정렬
• div의 세로만 정렬
• div의 가로와 세로 모두 정렬

 

 

 

div의 가로만 정렬

 

 

1. text-align 속성 이용
2. flex 속성 이용

 

text align 속성 이용하여 가로 정렬

위 처럼 div.outer안에 div.inner가 있는 상황이고, 이 정렬 방법은 text-align 속성을 이용하여 정렬하는 방식입니다.

.outer {
  text-align: center;
}

.inner {
  display: inline-block;
}

 

이 가로 가운데 정렬 방법에서 가장 중요한 키포인트는 div.outer에는 text-align 속성이 center, div.inner 영역의 display가 inline-block으로 설정되어 있다는 것입니다.

 

flex 속성 이용하여 가로 정렬

같은 구조의 영역에서 CSS 속성만 변경하여 동일하게 적용해보겠습니다.

 

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

또는

.outer {
  display: flex;
}

.inner {
  margin: 0 auto;
}

위 처럼 flex 속성을 이용하도 동일하게 가로 정렬을 적용할 수 있습니다.

이 방법의 키포인트는 div.outer 영역에 대해서 display 속성을 flex, justify-content 속성을 center로 설정하시거나 justify-content 속성 없이 div.inner 영역에 margin 속성을 0 auto로 설정해주시면 됩니다.

 

 

 

 

div의 세로만 정렬

 

 

1. vertical-align 속성 이용
2. flex 속성 이용

 

vertical align 속성 이용하여 세로 정렬

div 영역은 위와 동일한 상태로 구성하였고, 이 세로 정렬 vertical-align 속성을 이용하는 방법입니다.

.outer {
  height:250px;
  display: table-cell;
  vertical-align: middle;
}

.inner {
  display: inline-block;
}

이 세로로 가운데 정렬하는 방법은 div.outer 영역은 높이가 고정적으로 설정이 되어 있어야하고, display 속성은 table-cell 그리고 vertical-align 속성은 middle로 설정이 되어야합니다. 또한 div.inner 영역의 display 속성은 inline-block 으로 설정되어야합니다.

 

외부 div 영역의 높이를 설정하지 않거나 높이가 고정값이 아니라 "auto", "100%" 등의 가변적인 경우 정상적으로 정렬되지 않습니다.

flex 속성 이용하여 세로 정렬

영역 구조는 동일하게 하고 css의 속성만 변경하여 적용해보겠습니다.

.outer {
  display: flex;
  align-items: center;
}

또는

.outer {
  display: flex;
}

.inner {
  margin: auto 0;
}

div.outer 영역에 flex 속성과 align-items를 적용하여 세로 정렬이 가능합니다. 또는 align-items 속성이 없이도 div.inner 영역에 margin 속성을 auto 0으로 설정하여 적용 가능합니다.

 

 

 

 

div의 가로와 세로 모두 정렬

 

 

지금까지는 가로만 정렬하거나 세로만 정렬하는 방법에 대해서 소개해드렸습니다. 지금부터는 가로와 세로 모두 정렬할 수 있는 방법을 알려드리겠습니다.

flex 속성으로 가로와 세로 모두 정렬

.outer {
  display: flex;
}

.inner {
  margin: auto;
}

또는

.outer {
  display: flex;
  align-items: center; /* 수직 정렬 */
  flex-direction: row; /* default: row */
  justify-content: center; /* flex direction에 대해서 정렬방식 선택 */
}

위에서 설명했던 가로와 세로 정렬의 flex 방식을 적용하여 정렬을 할 수 있습니다.

flex 속성에 대한 자세한 내용은 아래 링크를 통해 확인하실 수 있습니다.

 

 

 

주의 사항

 

지금까지 소개해드린 모든 방법 중에 동작이 되지 않는 경우가 있으면 width 혹은 height가 고정적으로 선택이 되어 있는지 확인해보시기 바랍니다.

 

참고

flex - CSS: Cascading Style Sheets | MDN

developer.mozilla.org