CSS의 가운데정렬(수직/수평) 방법 및 margin:auto에 대해서

transform아래의 1번의 예제


1.transform의 transition을 이용한 방법 (수직/수평)

가장 먼저 position설정후 top:50%와 left:50%를 맞춘다

그러면 요소의 왼쪽모서리가 화면 정중앙에 위치하게 되지만 요소는 가운데에 정렬되지 않는다

여기서 transform의 transition을 이용해 요소 크기의 절반을 이동해주는 개념으로 top과 left를 -50%만큼 이동시킨다

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


※ css의 Transform 에 대해서

transform : translate( x , y ) ; 선택한 요소를 현재 위치 기준에서 x축 또는 y축으로 이동할 수 있다.


2.flex를 사용 (수직/수평)

아래의 css를 함께 사용하면 간편하게 가운데 정렬이 가능하다

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


3.margin을 이용 (수평)

가운데 정렬할 요소의 width의 설정이 필요하다

요소의 width를 설정하지 않으면 여백(margin)이 생기지 않기때문이다


margin은 default가 auto가 아니다

margin의 auto를 사용하면 남은 공간을 자동(auto)으로 여백(margin)으로 가득 채운다는 말이된다

그러므로 아래의 이미지는 요소 넓이 50px를 사용하고 나머지를 margin으로 좌우로 자동(auto)으로 채운다는 것이다

이를 이용해서 margin-left:auto 와 margin-right:auto를 이용해서 요소의 좌우정렬도 가능하다


.center{
  width:50px;
  margin: 0 auto;
}
.left{
  margin-left: auto;
}
.right{
  margin-right: auto;
}

margin위의 이미지의 오렌지부분은 margin으로 상하 margin은 0으로 좌우는 자동(auto)할당 된것을 볼수있다 // margin: 0 auto;



참고

가운데정렬

여러 정렬 모음

Apr 13, 2024 Views 153