CSS를 사용하여 Div를 중앙에 배치하는 다양하고 효과적인 방법

소개

CSS를 사용하여 div 요소를 중앙에 배치하는 방법에는 여러 가지가 있습니다. 다음은 몇 가지 일반적인 방법입니다.

1. Flexbox 사용

Flexbox는 요소를 수평 및 수직으로 중앙에 배치하는 가장 널리 사용되는 방법 중 하나입니다.

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

2. 그리드 레이아웃 사용

CSS 그리드는 요소를 중앙에 배치하는 쉬운 방법도 제공합니다.

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

3. 절대 위치 및 변환 사용

이 방법은 위치: 절대 및 변환을 사용하여 요소를 중앙에 배치합니다.

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

4. 자동 마진 이용하기

이 방법은 자동 여백을 사용하여 요소를 중앙에 가로로 배치하는 데 사용됩니다. 그러나 수직의 경우 추가적인 트릭이 필요합니다.

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`<div class="centered">Isi di sini</div>`}

5. Text-align 및 Line-height 사용(가로 중심에만 해당)

이 방법은 텍스트나 인라인 블록 요소에 적합합니다.

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

6. 테이블 표시 사용

이것은 오래된 기술이지만 여전히 작동합니다.

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

결론

페이지 중앙에 요소를 가로 및 세로로 가운데 배치하는 경우 Flexbox 및 Grid 방법이 가장 쉽고 현대적입니다. 그러나 프로젝트의 필요에 따라 다른 방법이 여전히 유용할 수 있습니다. 이 글을 끝까지 읽어주셔서 감사합니다

위 내용은 CSS를 사용하여 Div를 중앙에 배치하는 다양하고 효과적인 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!