완벽한 중앙 정렬

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

CSS에서 "Perfect center", 즉 요소를 부모 요소 내부에서 horizontally 및 vertically 모두 centering하는 것은 흔한 레이아웃 과제입니다. Flexbox는 이 문제에 대한 우아하고 간단한 해결책을 제공합니다. justify-content 및 align-items 속성을 결합하면 child 요소나 parent의 크기와 관계없이 flex container 내부에서 child 요소를 쉽게 center할 수 있습니다.

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

.container {
    display: flex; /* Turn the parent into a flex container */
    justify-content: center; /* Center the child horizontally along the main axis */
    align-items: center; /* Center the child vertically along the cross axis */
}

이 기법이 효과적으로 작동하도록 하려면 flex 컨테이너에 정의된 높이가 있는지 확인하세요. 컨테이너의 높이를 명시적으로 설정하지 않으면 콘텐츠 높이만큼만 높아지므로 수직 가운데 정렬이 눈에 띄지 않을 수 있습니다.

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

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

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Set a specific height for the container */
    border: 1px solid black; /* Optional: Add a border for visualization */
}

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

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

챌린지

쉬움

<div>를 포함하는 parent <div>인 child가 있는 HTML 문서가 주어집니다. 여러분의 과제는 Flexbox를 사용하여 parent 내부의 child를 완벽하게 center하는 것입니다. 아래 단계를 따르세요:

class가 parent인 <div> 요소를 대상으로 하는 CSS 규칙을 Write하세요.
.parent 요소의 display 속성을 flex로 설정하여 flex container로 만드세요.
.parent 요소의 justify-content 속성을 center로 설정하여 child를 horizontally center하세요.
.parent 요소의 align-items 속성을 center로 설정하여 child를 vertically center하세요.
vertical centering이 visible하도록 .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>