레이아웃 가운데 위치하게 만들기
1. 가운데로 오네가이
화면 가운데 띄워주세요, 화면 가운데 위치하게 해주세요 등의 요청을 처리해보겠어요.
2. 준비물 : position, transform
- 가운데 위치해야할 요소(이하 .centerBox)에 position:fixed 나 position:absolute 를 선언한다.
- top:50%, left:50%로 가운데에 위치하게 한다.
ㄴ 문제점 : top과 left를 이용해 위치를 설정할 경우 .centerBox의 top과 left가 교차하는 부분(예제의 빨간 점)이 기준점이 되므로 컨텐츠 박스의 크기가 고려되지 않은채 중앙에 위치하게 된다.
- 2의 문제점을 해결하기 위해 자기 자신을 기준점으로 위치를 설정시키는 transform을 이용하여 translate(-50%, -50%)을 적용시킨다.
- 그리고 이건 꿀팁 : absolute는 부모 요소 중 어디에 relative가 선언 되어있느냐에 따라 위치 기준이 정해진다. 필요한 특정 영역에 relative를 잘 선언해주자.
3. 해치웠나...?
transform을 이용하여 위치 설정 시 크로스 브라우징 처리가 필요합니다.
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);가운데 위치 설정을 통해 가정에 평화가 찾아오길 기원하며 그럼 20000
Author And Source
이 문제에 관하여(레이아웃 가운데 위치하게 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kcarl/position-absolute-transform-translate저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
