CSS를 사용하여 요소를 가운데에 맞추는 것은 생각보다 훨씬 어려워 보입니다. 특히 가로와 세로로 가운데에 맞춰야 하는 경우에는 더욱 그렇습니다. 오늘은 최신 CSS와 약간 오래된(그러나 여전히 관련성이 있는) 기술을 사용하여 이를 수행하는 방법을 보여 드리겠습니다.
텍스트 요소를 가로로 가운데 정렬
텍스트를 가로로 가운데 맞추는 것은 곧은 것입니다. text-align을 사용합니다. 속성에 center 값을 지정합니다. .
h1 {
text-align: center;
}위의 내용은 모든 텍스트에서 작동합니다. 요소.
중앙 블록 요소(텍스트가 아닌) 수평
텍스트가 아닌 요소를 가로로 가운데에 맞추려면 margin을 사용할 수 있습니다. 속성에 auto의 왼쪽 및 오른쪽 값을 지정합니다. . 또한 요소의 너비 값을 지정해야 합니다.
.center-horizontal {
margin-left: auto;
margin-right: auto;
width: 100px; /* or max-content;*/
}
참고:중앙 요소에 특정 고정 너비 값을 지정하지 않으려면 width: max-content를 사용할 수 있습니다. — 그러면 요소가 콘텐츠 너비로 확장됩니다.
블록 대 인라인 블록 요소
.center-horizontal 위의 클래스는 모든 블록 요소의 중앙에 배치되지만 인라인은 중앙에 배치되지 않습니다. 집단. HTML에서 일부 요소는 기본적으로 인라인 요소입니다. <button> 예를 들어 요소에는 기본 display: inline-block이 있습니다. 스타일. 하지만 display: block을 추가하기만 하면 블록 요소로 쉽게 만들 수 있습니다. CSS 클래스에:
.center-horizontal {
display: block;
margin-left: auto;
margin-right: auto;
width: 100px; /* or max-content;*/
}이제 모든 요소에서 작동합니다.
Flexbox를 사용하여 수평 중앙
현대적인 flexbox 속성을 사용하면 수평으로 중앙에 배치하는 것이 매우 간단합니다. 현재 .center-horizontal 바꾸기 이것으로 수업:
.center-horizontal {
display: flex;
justify-content: center;
}
보시다시피 <div> 요소가 중앙에 배치됩니다.
그러나 어떤 이유로 버튼 요소는 그렇지 않습니다. 무엇을 제공합니까?
음, <button> element는 <div>와 달리 특별한 요소입니다. 요소는 소위 플렉스 컨테이너일 수 없습니다.
그러나 버튼은 플렉스 아이템이 될 수 있습니다. 즉, 버튼을 플렉스 컨테이너 안에 넣으면 센터링이 작동합니다. 편집기에 다음 HTML을 추가해 보십시오.
<div class="center-horizontal">
<button>Center me</button>
</div>
이제 작동합니다! 방금 버튼 요소에서 중심 클래스를 제거하고 래핑 부모 <div> 내부에서 사용했습니다. 컨테이너.
팁:<img> element도 flex-container가 될 수 없지만 버튼처럼 flex-item이 될 수 있습니다.
-
요소를 세로로 가운데 정렬
CSS 초보자는 일반적으로 요소를 세로로 중앙에 배치하는 데 문제가 있습니다. Flexbox는 이것을 간단하게 만들지만 좋은 측정을 위해 먼저 이전 CSS 방법과 어떻게 작동하는지 봅시다.
margin-top 및 margin-bottom auto와 같은 것을 사용할 수 있다고 생각할 수도 있습니다. — 하지만 아닙니다.
또한 수직 센터링 작업을 수행하려면 지정된 높이의 상위 컨테이너가 있어야 합니다. 편집기에 다음 HTML을 추가하십시오.
<section class="section">
<div class="center-vertical">Center me vertically</div>
</section>섹션 클래스(상위)에 대해 이 CSS를 추가하십시오.
.section {
height: 200px;
border: 1px solid black;
}테두리는 진행 상황을 쉽게 볼 수 있도록 하기 위한 것입니다.
이제 자식 요소에 대해 다음 CSS를 추가합니다.
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}완료!
Flexbox를 사용하여 세로 중앙
flexbox를 사용하여 요소를 세로로 가운데에 맞추려면 부모 플렉스 컨테이너가 필요합니다. center-vertical을 제거할 수 있습니다. 이전 예제의 자식 요소에서 클래스를 가져옵니다. 이제 이 두 개의 flexbox 속성을 .section에 추가하세요. 다음과 같은 클래스:
.section {
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
}이제 자식 요소가 flexbox로 세로 중앙에 배치됩니다.
가로 및 세로로 가운데 요소
요소를 세로 및 가로로 가운데에 맞추려면 몇 가지 속성만 추가하면 됩니다. 기존 CSS 방법부터 시작하겠습니다.
먼저 다음 마크업을 추가하세요.
<section class="section">
<div class="center-vertical-and-horizontal">
Center me vertically & horizontally
</div>
</section>그리고 CSS
.section {
height: 200px;
border: 1px solid black;
}
.center-vertical-and-horizontal {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: max-content;
}
보시다시피, 이전의 "center elements vertical" 예제(flexbox 제외)와 매우 유사합니다. 여기에 left: 50%를 추가합니다. 선언 및 transform 하나의 선언에서 X축과 Y축을 모두 지정하는 속성:(-50%, -50%) . 첫 번째 값은 X, 두 번째 값은 Y입니다.
Flexbox를 사용하여 수직 및 수평 중앙
마지막으로 flexbox를 사용하여 동일한 트릭을 수행해 보겠습니다. center-vertical-and-horizontal을 제거할 수 있습니다. 자식 요소의 클래스. 이제 .section에 대해 클래스는 다음 CSS를 사용합니다.
.section {
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
이것과 이전의 중앙 수직 예제 사이의 유일한 차이점은 justify-content: center입니다. 수평 센터링 작업을 처리하는 선언입니다.
CSS 그리드를 사용하여 수평 및 수직 중앙
좋은 측정을 위해 모던 모던 CSS 그리드 속성이 수직 및 수평 센터링을 어떻게 처리하는지 봅시다. .section 대체 이것으로 수업:
.section {
height: 200px;
border: 1px solid black;
display: grid;
place-items: center;
}
두 가지 속성(display: grid &place-items:center ) CSS 그리드로 작업을 수행합니다. 매우 편리합니다!
불행히도 CSS 그리드는 모든 최신 브라우저에서 호환되지 않으며 WordPress와 같은 많은 인기 있는 CMS/프레임워크에서 아직 100% 작동하지 않습니다.
여기에서 CSS 그리드의 현재 호환성 상태를 확인하세요.