CSS 좌/우/가운데 정렬하는 방법들

가운데 정렬

1. margin: 0 auto; 와 text-align: center; 를 이용한 가운데 정렬

 

2. float: left;와 div박스 사이즈를 이용한 가로의 가운데 정렬

div박스의 height 값과 line-height값의 일치를 이용한 세로의 가운데 정렬

text라 가능한 방법!

 *단점 : div박스가 늘어나면 밑에 줄로 밀린다...

 

3. position: absolute; 에 left: 50%; 하면 가운데로옴겨지긴하는데 기준이 글자 왼쪽이라

  transform: traslate(-50%,0); 해주면 가운데 정렬 된다!

이 방법은 퍼센트만 바꾸면 꼭 가운데정렬말고도 좌/우 정렬도 될거같은데..

+ position: absolute;를 쓰니까 가운데 정렬하고싶은 영역에 position: relative를 해주면

기준이 그 영역으로 되서 쉽게 가능!

 

+ 여기에 top: 50%까지 해주면 화면에서 정중앙에 위치하게 할 수 있따! transform도 수정해야하는거 알즤?

 

4. background-position: center;

배경 중심으로 할때..

 

 

좌/우 정렬

1. float: left;  / float: right;