HTML을 세로로 가운데에 맞추는 방법

프론트엔드 개발자에게 수평 센터링은 상대적으로 간단하지만, 수직 센터링은 더 어려운 문제입니다. 이번 글에서는 HTML에서 요소를 세로로 가운데에 배치하는 방법에 대해 설명합니다.

일반적으로 HTML 요소를 세로 중앙에 배치하는 방법에는 여러 가지가 있습니다. 아래에서는 이러한 방법 중 몇 가지를 살펴보겠습니다.

1. Flexbox 사용

Flexbox(유연한 상자 레이아웃)는 CSS3의 최신 레이아웃 방법 중 하나이며 매우 편리한 센터링 방법입니다. Flexbox의 주요 아이디어는 컨테이너에 탄성 상자를 만든 다음 탄성 상자의 속성을 제어하여 수평 및 수직 센터링을 달성하는 것입니다. Flexbox를 사용하여 수직 중앙 정렬을 구현하는 방법을 살펴보겠습니다.

HTML 코드:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS 코드:

.container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

이 예에서는 먼저 컨테이너의 높이를 설정한 다음 컨테이너의 표시 모드를 설정합니다. 그리고 justify-content 및 align-items 속성을 사용하여 요소를 수직 및 수평으로 중앙에 배치합니다. 이 방법은 단순한 수직 센터링에만 작동한다는 점은 주목할 가치가 있습니다.

2. 절대 위치 지정 사용

절대 위치 지정이 더 일반적인 방법입니다. 절대 위치 지정을 사용하면 상위 요소를 기준으로 요소를 수직으로 중앙에 배치할 수 있습니다. 구체적인 구현은 다음과 같습니다.

HTML 코드:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS 코드:

.container {
    position: relative;
    height: 300px;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

이 예에서는 먼저 컨테이너에 대해 position:relative를 설정한 다음 하위 요소에 대해 position:absolute를 설정하고 top 속성을 설정합니다. 50%까지. 이렇게 하면 하위 요소가 수직으로 중앙에 배치됩니다. 그러나 이 요소의 상단에는 추가 공백이 있습니다. 이 공백을 제거하기 위해 우리는 변환:translateY(-50%)를 사용합니다. 이는 요소가 정확히 수직 중앙에 오도록 높이를 절반만큼 위로 변환합니다.

3. 테이블 셀 사용

테이블 셀 사용은 HTML 요소를 테이블 요소로 변환하는 것과 같습니다. table-cell은 간단한 수평 및 수직 센터링을 달성할 수 있지만 상대적으로 번거롭습니다. 구체적인 구현 방법을 살펴보겠습니다.

HTML 코드:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS 코드:

.container {
    display: table;
    height: 300px;
    width: 100%;
    text-align: center;
}
.child {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

이 예에서는 먼저 컨테이너의 표시 모드를 테이블로 설정한 다음 컨테이너의 높이와 너비를 설정합니다. 원하는 크기로 조정하면 text-align이 가운데로 설정됩니다(가로로 가운데 정렬). 다음으로, 하위 요소의 표시 모드를 table-cell로 설정하고 Vertical-align 속성을 통해 수직 중앙 정렬을 구현합니다.

4. 그리드 그리드 레이아웃 사용

CSS 그리드 레이아웃은 수평 및 수직 중앙 정렬을 포함한 그리드 유형의 레이아웃을 빠르고 효과적으로 만들 수 있는 강력한 레이아웃 방법입니다. 구체적인 구현은 다음과 같습니다.

HTML 코드:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS 코드:

.container {
    display: grid;
    height: 300px;
    place-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

이 예에서는 먼저 display:grid를 사용하여 컨테이너의 표시 모드를 그리드 레이아웃으로 설정합니다. 그런 다음 place-items 속성을 사용하여 수평 및 수직 중앙에 배치합니다. 이 방법은 아직 비교적 새로운 방법이기 때문에 브라우저 호환성 측면에서 아직 충분하지 않습니다.

요약

이 문서에서는 HTML에서 수직 중앙 정렬을 달성하는 몇 가지 일반적인 방법을 살펴보았습니다. 이러한 각 방법에는 장단점이 있으며 실제 상황과 필요에 따라 적절한 방법을 선택할 수 있습니다. 단순한 수직 센터링이라면 Flexbox나 절대 위치 지정을 사용하는 것이 상대적으로 간단하고 효과적입니다. 더 복잡한 레이아웃의 경우 CSS 그리드 레이아웃을 사용할 수 있습니다.

위 내용은 HTML을 세로로 가운데에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!