수평 수직 가운데를 정렬하는 방법 – 오랜만에 포스팅이에요오늘 살펴볼 것은 박스 내의 요소들을 중앙 정렬하는 방법입니다.거의 수평 정렬은 어느 정도 할 수 있다고 생각을 합니다. 제가 가장 힘들었던 부분은 수직 줄이었어요.vertical-align 얘도 있는데 display block에서는 안될까요ㅜㅜ

대부분의 수직방향 가운데 정렬은 margin 혹은 padding으로 맞춥니다.아닐 수도 있어요 다른방법을아시는분은이글을안보셔도됩니다!!대충이렇게하면수평중앙줄은됐을겁니다.문제는 수직 정렬입니다. 제가 실제로 개발하고 나서 가장 불편했던 점은 수직 정렬입니다. 특히 반응형!!

반응형 웹에서 width 값이 동적으로 바뀌기 때문에 수직 정렬 문제가 가장 어려웠습니다.

오늘 제가 가져온 방법은 두 가지입니다.

position을 이용한 방법 전에 제가 포스팅한 글 중에 position 속성에 대한 문장이 있었습니다. 지금 소개할 수 있는 방법은 position을 이용해서 가운데 정렬을 하는 방법입니다.
HTML 코드를 위와 같이 준비해, 밖의 영역(실제로 차지하는 영역)과 내부 영역(이미지나 텍스트가 오는 영역)을 나누어 줍니다.
css소스는 다음과 같이 작성하여 드립니다.
설명을 드리겠습니다. 안쪽 요소에는 absolute 값을 주고 transform 속성으로 topleft 각각 -50%씩 이동시킵니다. 왜냐하면위치값을결정하는기준점이왼쪽위이기때문입니다. 그리고 그후 topleft를 50%만 이동시켜줍시다!!
transform-50%에 대한 자세한 이야기는 이전에 언급했던 position 속성에 대한 글을 참조하시기 바랍니다.링크를 걸어둘게요.
position에 대한 설명문 https://blog.naver.com/chap95/221753329990 블로그 포스팅 활동이 적었어요(반성 중…) 오늘은 css 속성 중 하나인 position 속성에 대해 알고 있어요… blog.naver.com

다시 본론으로 돌아가서 absolute를 준 후 외부 속성에 position relative 속성을 부여합니다. 왜냐하면 absolute 속성의 위치를 결정하는 요소 중 하나가 가장 가까운 부모의 요소를 찾아서 relative or absolute or fixed가 적용된 부모의 태그 위치를 기준으로 absolute의 위치가 결정되기 때문입니다. (부모요소 중 가짜속성 적용 택이 없는 경우 body 기준)

이 중 fixed, absolute를 권장하지 않습니다. 이유는 다른 요소의 위치를 건드릴 수 있기 때문입니다.

absolute와 fixed를 적용해서 가운데 가지런한 모습

relative를 사용하여 가운데 정렬된 이미지와 같은 차이를 볼 수 있습니다. absolute 와 fixed는 권장하지 않습니다.

다음 방법으로 넘어가겠습니다.

2. flex-box를 이용하는 방법

만능 flex-box가 등장하고 있습니다.바로코드 보여드려요!! HTML 소스는 이렇게 준비하세요

css는 이렇게 준비해줍니다.

설명드리면 flex-box 속성을 이용하는 방법입니다.

flex 속성을 적용시킨 후 align-items에서 수직 정렬을 center에 justify-content에서 수평 정렬을 center에 맞추기만 하면 됨!

플렉스박스를 아시는 분은 금방 이해가 되실 겁니다. flex-box에 대한 자세한 설명은 생략합니다.flex박스 속성을 검색하고 싶다면 구글링을 추천합니다.

1번 방법과 2번 방법의 차이(?) 저는 2번 방법을 꼭 추천합니다.

이유

div 태그를 하나 더 만들지 않아도 된다.코드가 단순하게 됩니다. 최대한 줄입시다.

다른 요소는 걱정하지 않아도 된다.솔직히지금제가보여드리는예시코드는단순한구조를가지고있어서다른요소를생각하지않으셔도되지만본코딩에서는다른요소영역을고려하셔야합니다. 이런 경우 2번 방법을 이용하면 다른 요소영역을 침범하지 않고 깔끔하게 정렬할 수 있습니다.

반응형도 된다.padding과 margin에서 수직 정렬을 했을 때 가장 문제가 됐던 점은 반응형으로 가운데 정렬을 했던 요소들이 마음대로 움직인다는 점입니다.플렉스박스는 반응형이라도 가운데 정렬을 유지합니다!! (여기에 관해서는 1번도 적용됩니다) 끝납니다. 감사합니다 (꾸벅)