CSS 상하좌우 수직수평 가운데 중앙 정렬의 모든 것 "초보자용"

안녕하세요. 오늘은 저처럼 웹개발 초보자들을 위한 컨텐츠를 작성해보려 해요. 그 중에서도 웹개발의 3대장(HTML, CSS, JS) 이라고 불리우는 것 중에서 CSS의 가운데정렬을 알려보려 합니다. 특히 저같이 초보자들이 참 많이 시행착오를 하는거 같은데 조금이라도 시행착오를 줄이고, 원하는 기능을 정확히 구현하기 위해 제가 직접 시행착오 끝에 얻어낸 결과물로 내용을 작성해보려 하며 또한 저 역시 잊어버리면 안되기때문에 기록물로써 작성해볼려 해요. 이 글을 통해 웹개발을 하시는 초보자분들에게 도움이 되었으면 하네요. 자 그럼 시작해 볼까요!

 

 

목차(차례)

 

 

블록요소 가로 중앙 정렬

CSS를 통해 가로 중앙 정렬을 하는 방법은 여러가지가 있지만 가로 중앙정렬을 시키기 위해서는 이 요소가 블록요소인지 인라인 요소인지 확인이 필요하고 만약 블록요소인 경우라면 다음과 코드로 작성하면 작동합니다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

 

인라인 요소 가로 중앙 정렬

이번에는  인라요소 가로 중앙 정렬을 시켜볼것인데요. 인라인 요소와 블록요소를 구분할 수 있어야 합니다. 인라인 요소라면 아래 코드와 같이 가로 중앙 정렬을 시킬 수 있고, 가장 일반적으로 많이 쓰는 코드이기도 합니다. 하지만 초보자들이 실수 하는 경우가 바로 여서 발생하는데요! 그건 바로 인라인요소 코드로 블록요소를 움직이려 할때 입니다. 이 부분을 잘 파악하셔서 적용하면 될거 같네요

.container {
  text-align: center;
}

 

세로 중앙 정렬

세로 중앙 정렬 방법은 생각외로 간단합니다. 다음 코드를 적용해 보세요

.container {
  position: relative;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

텍스트 가로 중앙 정렬

텍스트를 가로방향으로 중앙 정렬을 하려면 아래 코드를 이용하시면 됩니다. 위 첫번째 코드와 비슷하죠!?

.center-text {
  text-align: center;
}

 

이미지 가로 중앙 정렬

이미지를 가로 방향으로 중앙 정렬하려면 이미지를 블록 요소로 설정을 해줘야 해요! 그리고 나서 가로 방향의 마진을 자동으로 설정하는 방식으로 구현할 수 있어요. 그럼 중앙 정렬이 됩니다. 아래 코드를 볼께요!

.center-image {
  display: block;
  margin: 0 auto;
}

 

마치며..

자, 어떤가요!? 원하는 기능인 중앙정렬이 완성되었죠. 기초적인 내용이긴 하지만 초보자들에게는 정말 원하는 요소가 작동하지 않을때 많이 당황스럽고 방법을 몰라 해매는 경우가 많으니까요. 해매지 말고 검색을 통해 찾아봐야겟죠~ 자 오늘은 CSS 중앙정렬을 시키는 기술에 대해 알아봤고, 이 기술을 사용하여 웹 페이지 레이아웃을 개선하고 멋진 웹사이트를 개발 할 수 있기를 기원합니다. 이 보다 더 쉽게 설명은 불가능 할거 같네요! 이 글을 보시는 본들에게 CSS중앙 정렬을 쉽게 이해하고 활용할 수 있도록 글을 작성해 봤습니다. 이 글을 통해 조금이라도 도움이 되었으면 하는 바램이네요.

 

창업플랫폼 오프너스에 방문하여 해당 포스팅 글을 읽어주셔서 감사합니다.

창업준비의 시작, 오프너스

창업준비의 시작, 오프너스.