그놈의 중앙정렬하기! 오늘 부로 졸업하기로 했다..
가장 전통적인 방법 position:absolute
가장 전통적인 방법 position:absolute 는
부모 요소를 기준으로 절대적인(닉값..👍) 위치 값을 선언할 수 있다. display:Position 그 전에 알고 쓰는 것이 어떨까?
absolute
선언된 영역의 위치를 절대 좌표 기준으로 지정 가능 + 부모 또는 조상의 공간에 relative가 선언되었다면 울타리 안의 양 한마리가 되어버린다. -> 공중부양(포토샵의 레이어 개념)
relative
상대적인 새로운 좌표 값을 형성 + 자식이 absolute로 선언되었다면 현재 공간에 의한 양의 울타리로 구성할 수 있음. -> 기존 작성된 영역보다 언제든지 이동 가능한 존재. 양을 버리고 울타리만 이동하는 경우는 없다.
그외
static : 일반적인 적층 개념 - 별도의 작성 없이도 상단으로 쌓여지는 구조를 형성(position의 기본값)
fixed : 현재 보여지는 브라우저의 공간을 기준으로 고정정시키는 구성 => 가출소년..?
자식에게 left50% top% 선언하여 중앙 정렬에 오게 한다.
(포인트를 기준으로 위치를 설정해야 함(좌상단(left, top), 우상단(right, top), 우하단(right, bottom), 좌하단(left, bottom))
하지만 위치만 단순히 선언한다면 우리의 중앙 정렬은 불가하다는 것..
정중앙으로 오게 하려면 transform:translate(-50%,-50%);
을 놓치지 않고 함께 선언해야한다.
알고쓰자!
transform은 형태를 변형하는 명령이다.
translate는 위치를 조정하는 것이다. (첫 번째 값과 두 번째 값은 x축과 y축 이다.)
두번째 방법 flex
요즘 핫(?)한 신세계.. 바로바로 display:flex!!!
중앙 정렬이 훨씬 간편하다.
이렇게
display: flex
align-content
center; align-items: center
를 선언하면 중앙 정렬이 된다.
그외
☝🏻line-height 값을 부모의 높이로 동일하게 부여하기
☝🏻margin:auto 를 통해 수평 중앙에 주기
☝🏻text-align:center 사용하기 (inline 일 때 수평 중앙에 가능)
중앙 정렬을 통해 display 속성도 파헤쳐 보는 시간 마침..
