센터링은 CSS의 가장 어려운 측면 중 하나입니다.
방법 자체는 일반적으로 이해하기 어렵지 않습니다. 대신 사물을 중심에 두는 방법이 너무나 많기 때문입니다.
사용하는 방법은 중앙에 배치하려는 HTML 요소 또는 수평 또는 수직 중앙에 배치하는지 여부에 따라 다를 수 있습니다.
이 튜토리얼에서는 가로, 세로, 세로 및 가로로 서로 다른 요소를 중앙에 배치하는 방법을 살펴 봅니다.
가로로 가운데 맞추는 방법
요소를 가로로 가운데에 맞추는 것이 일반적으로 요소를 세로로 가운데에 두는 것보다 쉽습니다. 다음은 가로로 가운데에 배치 할 수있는 몇 가지 일반적인 요소와이를 수행하는 다양한 방법입니다.
CSS Text-Align Center 속성을 사용하여 텍스트를 가운데에 맞추는 방법
텍스트 또는 링크를 가로로 가운데에 맞추려면 text-align다음 값과 함께 속성을 사용하십시오 center.
Hello, (centered) World!
p { text-align: center; }
CSS Margin Auto로 Div를 중앙에 배치하는 방법
margin값과 함께 속기 속성을 사용하여 가로 0 auto와 같이 블록 수준 요소를 중앙에 div배치합니다.
.child { ... margin: 0 auto; }
Flexbox를 사용하여 Div를 수평으로 중앙에 배치하는 방법
Flexbox는 페이지 중앙에 사물을 배치하는 가장 현대적인 방법이며 반응 형 레이아웃을 예전보다 훨씬 쉽게 디자인 할 수 있습니다. 그러나 Internet Explorer와 같은 일부 레거시 브라우저에서는 완전히 지원되지 않습니다.
바로 적용 인 flexbox 수평 요소를 센터 display: flex및 justify-content: center부모 요소에 :
.container { ... display: flex; justify-content: center; }
세로로 가운데 맞추는 방법
Flexbox와 같은 현대적인 방법없이 요소를 수직으로 중앙에 배치하는 것은 정말 힘든 일이 될 수 있습니다. 여기에서는 먼저 사물을 수직으로 중앙에 배치하는 몇 가지 이전 방법을 살펴본 다음 Flexbox로 수행하는 방법을 보여줍니다.
CSS 절대 위치 및 음수 여백을 사용하여 Div를 세로로 중앙에 배치하는 방법
오랫동안 이것은 사물을 수직으로 중앙에 배치하는 방법이었습니다. 이 방법의 경우 중앙에 배치하려는 요소의 높이를 알아야합니다.
먼저 display부모 요소 의 속성을 relative.
그런 다음 자식 요소에 대해 display속성을 absolute및 top로 설정합니다 50%.
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }
그러나 실제로는 자식 요소의 상단 가장자리를 수직으로 중앙에 배치합니다.
자식 요소를 중앙에 배치하려면 margin-top속성을 -(half the child element's height)다음 과 같이 설정하십시오 .
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }
변환 및 변환을 사용하여 Div를 세로로 중앙에 배치하는 방법
중앙에 배치하려는 요소의 높이를 모르는 경우 (또는 알고 있더라도)이 방법은 멋진 트릭입니다.
이 방법은 위의 음의 여백 방법과 매우 유사합니다. display부모 요소 의 속성을로 설정합니다 relative.
자식 요소의 경우 display속성을 absolute로 설정하고로 설정 top합니다 50%. 이제 음의 여백을 사용하여 자식 요소를 진정으로 중앙에 배치하는 대신 다음을 사용하십시오 transform: translate(0, -50%).
.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }
참고 translate(0, -50%)를위한 속기 translateX(0)와 translateY(-50%). transform: translateY(-50%)자식 요소를 세로로 가운데에 쓸 수도 있습니다 .
Flexbox를 사용하여 Div를 세로로 중앙에 배치하는 방법
수평으로 중앙에 배치하는 것처럼 Flexbox를 사용하면 수직으로 중앙에 배치하기가 매우 쉽습니다.
요소를 세로 중앙에 배치하려면 display: flex및 align-items: center부모 요소에 적용 합니다.
.container { ... display: flex; align-items: center; }
How to Center Both Vertically and Horizontally
How to Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins
This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center.
Set the display property of the parent element to relative.
Then set the child's display property to absolute, top to 50%, and left to 50%. This just centers the top left corner of the child element vertically and horizontally.
To truly center the child element, apply a negative top margin set to half the child element's height, and a negative left margin set to half the child element's width:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }
How to Center a Div Vertically and Horizontally with Transform and Translate
Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.
First, set the display property of the parent element to relative.
Next, set the child element's display property to absolute, top to 50%, and left to 50%.
Finally, use transform: translate(-50%, -50%) to truly center the child element:
.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
How to Center a Div Vertically and Horizontally with Flexbox
Flexbox is the easiest way to center an element both vertically and horizontally.
This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:
.container { ... display: flex; justify-content: center; align-items: center; }
That's everything you need to know to center with the best of 'em. Now go forth and center all the things.