페이지의 요소 중앙에 배치

CSS를 사용하여 요소를 페이지 중앙에 배치하는 방법에는 여러 가지가 있지만 여기서는 간단하고 구현하기 쉬운 두 가지 기술을 제시합니다. 로그인 상자나 정보 메시지 등을 페이지 중앙에 배치하기 위해 이러한 기술을 사용할 수 있습니다.

구현

몇 개의 div s를 중앙에 배치하기 위해 페이지에서 다음과 같이 정의했습니다.

<div class="centered1">I am centered div 1.</div>
<div class="centered2">I am centered div 2.</div>

div 클래스가 각각 centered1 및 centered2인 것 외에는 특별한 것이 없습니다.

기술 1

클래스.centered1는 div에 대한 절대 위치를 사용하고 페이지 상단에서 50%, 왼쪽에서 50%를 표시하도록 설정합니다. div 의 마진은 margin: -200px 0 0 -250px; 로 설정됩니다. div는 가로 500px, 너비 400px이므로 이 여백은 div를 왼쪽으로 250px, 위로 200px 이동하여 페이지 중앙에 표시되도록 하는 효과가 있습니다.

.centered1 {
    position: absolute;
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    background-color: goldenrod;
    margin: -200px 0 0 -250px;
}

기술 2

두 번째 기법은 첫 번째 기법과 거의 동일하지만 이번에는 margin를 페이지 중앙에 배치하기 위해 div를 사용하지 않았습니다.

이전과 마찬가지로 위치를 absolute로 설정하고 div에 너비와 높이를 지정했습니다. top 및 left 속성을 50%로 설정하여 div의 왼쪽 상단 모서리를 화면 중앙으로 이동했습니다.

마지막으로 변환을 사용하여 div의 중심을 페이지 중앙으로 이동합니다. transform: translate(-50%, -50%); . 역시 결과는 구성 요소가 화면 중앙에 표시되는 것입니다.

.centered2 {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

추가 생각

여기서는 두 가지 간단한 기술을 보여 주었습니다. FlexBox나 Grid 레이아웃을 사용하거나 다른 여러 방법을 사용하여 동일한 효과를 만들 수 있었을 것입니다. 사용하는 다른 기술이 있으면 아래에 의견을 남겨주십시오.

감사의 말

사진 제공: Thought Catalog on Unsplash