완벽한 중앙 정렬

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 48번째.

CSS에서 부모 요소 안의 요소를 가로와 세로 방향 모두 가운데에 배치하는 ‘완벽한 중앙 정렬’은 흔히 마주치는 레이아웃 문제입니다. Flexbox는 이 문제를 우아하고 간단하게 해결합니다. justify-content 속성과 align-items 속성을 함께 사용하면 자식 요소나 부모 요소의 크기와 관계없이 플렉스 컨테이너 안에서 자식 요소를 쉽게 가운데에 배치할 수 있습니다.

Flexbox를 사용해 완벽하게 가운데에 배치하는 방법은 다음과 같습니다.

.container {
    display: 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 요소의 height를 200px로 지정하세요.

직접 해보기

<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>