CSS 가운데정렬

쉬워보이는듯 어려운 가운데 정렬을 뿌셔보자요.

오늘은 수업시간에 배운 text-align 과 margin, transform 그리고 그 이상의 속성들을 사용해서 가운데 정렬을 해보려고 한다

가운데 정렬은 쉬워보이는듯 쉽지 않은 친구이다,,
수많은 시행착오를 겪다보면 저절로 익숙해지는 것 중 하나라고 생각한다!
함께 뿌셔보자요 🦾

inline 요소 이미지를 활용해 가운데 정렬 실습을 해 보겠다 !

이미지 가운데 정렬

이런 올라프 이미지를 가운데 정렬 하고싶을때?

1. Div 와 text-align

'text-align: center'는

• 자식인 inline
• 자식인 block
• 자식인 inline-block
• text
  에 적용이 되는 속성이다.

이미지 태그 앞뒤로 div 태그로 감싸주고
text-align: center 해주면 div 안의 inline 요소인 이미지가 가운데 정렬이 된다.

<div>
    <img src="" alt="">
</div>

div {
  text-align:center
}

2. Display & margin

CSS의 display:block 을 사용해 이미지를 블록레벨요소로 바꿀 수 있다.

margin: 0 auto(block요소를 중앙 정렬)

• 자기 자신을 중앙정렬
• 블럭요소가 부모의 전체 width를 가지고 있을 경우 원하는 중앙 정렬을 얻을 수 없다
• 자기 자신이 inline-block인 경우에는 사용할 수 없다.
• inline 요소를 display:block로 바꾼다음 width를 부모보다 좁게 사용하면 사용할 수 있다.

display:block 값을 주고 margin:auto 를 주면 가운데 정렬이 된다.

img {
 display: block;
  margin: auto;
}

3. Display: flex

• 이미지 태그 앞뒤로 div 태그로 감싸주고 div 에 flex 를 적용한다

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

4. position

우선 position 은 기준이 될 relative 속성과
기준에 따를 absolute 속성이 있다.
이걸 잘 이용해서 포지션위치를 정해줘야 한다는 것 유의해야 한다.
자, 지금 올라프가 있는 img의 position:absolute 를 줘보자

img {
	position: absolute;
    left: 50%;  
}

👩🏻 : 어어라 ...? 이건 가운데정렬이 아닌걸요 선생님 ...?
CSS : 웅 왜냐면 기준이 왼쪽 위 꼭지점인걸 ..? 이 기준점에서 left:50% 준 것일 뿐인데 ..?

예 ,. 그렇습니다.
디폴트 기준점이 아래 이미지처럼 왼쪽 상단 모서리이기 때문에 left:50%는 가운데가 아닌것이다 ...

• 

그래서

 transform: translateX(-50%);

이 코드로 기준점을 변경해주는 것 !!!
( 본인의 너비에서 50%만큼만 x 축 왼쪽으로 변경하는 원리)
그러고 다시 코드를 실행해보면

가운데 정렬 완! 성! 해! 결!