요소 중앙 정렬하기

분맹히 공부했는데 써먹을 때마다 검색을 해야한다?
이건 한번 정리를 싹 해놔야된다는 뜻!

body{
  margin: 0;
}
.content{
  width: 400px;
  background-color: gray;
}

화면에 이런 요소가 있다고 치자.
이 요소를 세로 + 가로 중앙 정렬을 하고싶다.

1. position 속성 사용 [inline-block]
부모 body를 기준으로 맞출 것이므로 position을 absolute로 맞춰준다.

absolute는 자신의 위치를 부모 객체를 대상으로 맞춘다.
( 다른 요소들에게 영향받지 않음! )

.content{
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: gray;
}

내가 원하는 위치도 아닐뿐더러, 화면의 정가운데에 위치하지도 않는다.
top: 50%는 위에서부터 딱 중간지점, left: 50%는 왼쪽 지점으로 중간지점이므로
정확한 정가운데 위치는 .content 요소의 시작점이 된다.
따라서 사각형의 가로 길이의 반만큼 왼쪽으로 이동하고,
세로 길이의 반만큼 위로 이동해주면 화면의 가운데로 옮겨진다.

2. margin: 0px auto; 사용 [조건 : block, width]
(가로 정렬)
정말 간단해서 자주 쓰이지만 주의해야 할 점이 있다.
정렬하고자 하는 요소가 display:block 속성을 가지고,
width 크기가 꼭 지정이 되어야 적용된다.

1. 
margin-left: auto;
margin-right: auto;
2.
margin: 0px auto;
3. (안됨!)
margin-top:auto;
margin-bottom: auto;
// margin-top, margin-bottom가 auto일 경우 0으로 취급된다!

• 만약 top, bottom을 auto로 하고싶은 경우에는 부모 컨테이너에 display: flex; 속성과 가로, 세로 크기를 지정해주면 된다.

3. flex property 사용
   margin을 사용하는 2번 방법은 간단하지만 권장되지 않는다.
   요소들간의 상호작용을 할 경우 전체 높이 값을 알 수가 없기 때문이다.
   flex, justify, align을 이용해줄 것이다.
   
   flex는 자신이 가진 내용물의 가로 길이만큼만 공간을 차지하게 된다.

body{
  margin: 0;
  display:flex;
  height: 100vh;
  justify-content: center;	//가로 정렬
  align-items: center;		//세로 정렬
}
.content_wrapper{
  display:flex;
  width: 400px;
  height: 400px;
  background-color: gray;
}
.content{
  display:grid;
  width:100%;
  justify-content: center;
  align-items: center;
}

원하는대로 정가운데에 요소가 위치한 모습이다.
content 내부도 정가운데에 위치하도록 코드를 작성해주었다.

1분 코딩 페이지는 정리가 정~~~말 잘되어있습니다. 👍🏻
궁금하신 분들은 아래의 출처 링크 들어가보세욧 🌈

[출처]

1. [css] element 또는 요소(div) 가운데 정렬 방법

2. 이번에야말로 CSS Flex를 익혀보자