완벽한 중앙 정렬

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 48번째.

CSS에서 부모 요소 내에서 가로 및 세로 모두 중앙에 배치하는 "완벽한 중앙 정렬"을 구현하는 것은 흔한 레이아웃 과제입니다. Flexbox는 이 문제에 대해 우아하고 간단한 해결책을 제공합니다. justify-content와 align-items 속성을 결합하면 자식 요소나 부모 요소의 크기에 상관없이 flex 컨테이너 내에서 자식 요소를 쉽게 중앙에 배치할 수 있습니다.

Flexbox를 사용하여 완벽하게 중앙 정렬하는 방법은 다음과 같습니다:

.container {
    display: flex; /* 부모를 flex 컨테이너로 만듭니다 */
    justify-content: center; /* 주축을 따라 자식 요소를 가로로 중앙 정렬합니다 */
    align-items: center; /* 교차축을 따라 자식 요소를 세로로 중앙 정렬합니다 */
}

이 기술이 효과적으로 작동하게 하려면, flex 컨테이너에 정의된 높이가 있는지 확인하세요. 컨테이너의 높이가 명시적으로 설정되지 않으면 컨텐츠의 높이만큼만 커지며, 수직 중앙 정렬이 뚜렷하게 나타나지 않을 수 있습니다.

HTML에서 이 기술을 사용하는 방법의 예시는 다음과 같습니다:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* 컨테이너의 특정 높이를 설정합니다 */
    border: 1px solid black; /* 선택 사항: 시각화를 위해 테두리를 추가합니다 */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

이 예제에서 .container 요소는 300px의 높이를 가지며, .child 요소는 그 안에서 가로 및 세로로 완벽하게 중앙에 배치됩니다.

챌린지

쉬움

부모 디비전(<div>)과 그 안에 포함된 자식 디비전(<div>)이 있는 HTML 문서가 주어집니다. 여러분의 작업은 Flexbox를 사용하여 자식 디비전을 부모 디비전 내에서 완벽하게 중앙에 배치하는 것입니다. 다음 단계를 따르세요:

parent 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
.parent 요소의 display 속성을 flex로 설정하여 플렉스 컨테이너로 만듭니다.
.parent 요소의 justify-content 속성을 center로 설정하여 자식을 가로 방향으로 중앙에 배치합니다.
.parent 요소의 align-items 속성을 center로 설정하여 자식을 세로 방향으로 중앙에 배치합니다.
세로 중앙 배치가 눈에 보일 수 있도록 .parent 요소에 200px의 height를 부여합니다.

치트 시트

Flexbox를 사용하여 요소를 가로 및 세로로 완벽하게 중앙에 배치하려면, justify-content: center와 align-items: center를 결합하세요:

.container {
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    height: 300px; /* 세로 중앙 정렬이 보이도록 높이 정의 */
}

세로 중앙 정렬이 명확하게 보이려면 flex 컨테이너에 정의된 높이가 있어야 합니다.

직접 해보기

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>