CSS를 사용하여 텍스트 및 HTML 요소를 세로로 중앙에 배치하는 방법

CSS에서 무언가를 수직으로 중앙에 배치하는 것은 생각만큼 쉽지 않으며, flexbox와 같은 도구가 나오기 전까지는 정말 어려웠습니다. 다행스럽게도 이제 컨테이너 내에서 무언가를 수직으로 중앙에 배치하는 것이 매우 쉽습니다. 이를 달성하는 방법을 살펴보겠습니다.

CSS에서 항목을 세로로 중앙에 배치

.item라는 컨테이너 내에 #container라는 div가 있는 간단한 HTML이 있다고 가정해 보겠습니다. HTML은 다음과 같습니다.

<div id="container">
    <div class="item">
        Hello
    </div>
</div>

이것을 만들 때 출력은 아래 예와 같습니다. 기본적으로 .item는 전체 너비이며 컨테이너 상단에 있습니다.


이를 수정하고 "Hello"텍스트를 포함하는 .item div를 중앙에 배치하려면 #container를 가변 상자로 만들어야 합니다. flexbox를 수직으로 중앙에 배치하려면 컨테이너 CSS를 다음과 같이 업데이트하기만 하면 됩니다.

#container {
    display: flex;
    align-items: center;
}

결과는 다음과 같습니다.


수직 중앙에 배치하고 수평 중앙에도 배치하려면 #container CSS를 다음과 같이 업데이트합니다.

#container {
    display: flex;
    align-items: center;
    justify-content: center;
}

결과는 다음과 같습니다.


A demo showing the full code for this example can can be found on codepen here .

CSS를 사용하여 화면 중앙에 항목을 중앙에 배치합니다.

div 요소 내에서 무언가를 중앙에 배치하려는 경우에는 잘 작동하지만 사용자 화면의 중앙에 정확히 중앙에 무언가를 배치하려면 어떻게 해야 할까요? CSS를 사용하여 사용자 화면 중앙에 무언가를 중앙에 배치하려면 여전히 flexbox 를 사용할 수 있습니다. 컨테이너의 너비만 조정하면 됩니다. 이번에는 너비가 #container이고 높이가 100vw인 100vh를 만들 것입니다.

이 두 단위는 뷰포트의 전체 너비와 높이와 일치하도록 너비와 높이를 만들도록 브라우저에 지시합니다#container. 여전히 동일한 HTML을 유지할 수 있습니다.

<div id="container">
    <div class="item">
        Hello
    </div>
</div>

그러나 #container 요소에 대한 CSS는 이제 이 새로운 너비와 높이를 추가하도록 조정됩니다. 또한 box-sizing: border-box 를 추가하여 #container 가 넘치지 않고 스크롤 막대가 나타나도록 했습니다.

#container {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

다시, a demo of this example can be found on codepen here .

결론

flexbox를 사용하면 CSS에서 항목을 중앙에 배치하는 것이 정말 쉽습니다. CSS에 대해 자세히 알아보려면 interactive guide to flexbox을 만들었습니다. 항목을 정말 쉽게 중앙에 배치할 수 있을 뿐만 아니라 이 가이드는 다양한 flexbox 속성이 어떻게 작동하는지 보여줍니다.

If you want more CSS content, you can find it here .