CSS의 다양한 센터링 방법

CSS 수평 중앙 정렬 text-align:center 및 margin:0 자동

이 두 가지 방법은 수평 중앙 정렬에 사용되며 전자는 상위 요소에 사용됩니다. 이 설정되고 후자가 하위 요소에 대해 설정됩니다. 작동하기 위한 첫 번째 조건은 하위 요소가 float의 영향을 받아서는 안 된다는 것입니다. 그렇지 않으면 모든 것이 헛될 것입니다. margin:0 auto

는 margin:0 auto 0 auto로 쓸 수도 있습니다. 이해하지 못하는 아이들은 CSS 약어에 대한 정보를 스스로 찾아볼 수 있습니다.

세로 중앙 줄 높이

뭐? ! 수직 센터링에서는 여백이 작동하지 않습니까? 분명히 이것이 사실입니다. 우리는 margin:0 auto만 사용하고 auto 0은 사용하지 않습니다. line-height의 경우 해당 값이 상위 요소

의 높이 값과 같을 때 내부 텍스트가 자동으로 세로 중앙에 배치됩니다. 그냥 텍스트인 것 같은데, 안타깝네요.

만능위치법

이 방법은 그야말로 보편적이라고 할 수 있다. 중심을 잡을 수 없는 요소로 고민할 때 부작용이 거의 없이 과감하게 사용할 수 있는 것은 프론트엔드 엔지니어들이 집에서 꼭 챙겨야 할 방법 중 하나다.

구체적인 방법은 매우 간단합니다. 먼저 상위 요소에 positon:relative를 작성하면 하위 요소에 position:absolute가 표시되지 않습니다. 우주 공간에 위치. 다음으로 하위 요소의 높이와 너비를 작성합니다

. 일부 브라우저에서는 이 두 값 없이 구문 분석할 때 예상치 못한 정렬 오류가 발생할 수 있습니다. 그런 다음 전체 방법의 핵심이 나옵니다. 상단: 50%; 왼쪽: 50% 및 margin-top: 높이 값의 절반인 음수

margin-left: 가중치의 절반인 음수입니다. 값. . 정렬한 후 하위 요소에 대해 이와 같이 CSS를 작성할 수 있습니다(물론 상위 요소도 너비와 높이를 먼저 작성해야 합니다)

{width:100px;height:80px;position:absolute top; :50%;left:50%;margin-left:50px;margin-top:40px}

다음으로, 페이지를 새로고침하세요.

이 방법을 사용하면 어떤 형식의 콘텐츠라도 즉시 중앙에 배치할 수 있다는 장점이 있습니다. 단점은 요소에 일정한 너비와 높이 값이 있어야 한다는 것입니다. 그렇지 않으면 자바스크립트를 사용해야 할 수도 있습니다. 약간의 계산을 해보겠습니다.