Div 내부의 두 요소를 수직 중앙에 어떻게 배치합니까?

Div에서 두 요소를 수직으로 가운데에 배치하는 방법

div 내에서 두 요소를 수직으로 정렬하려면 다음 방법 중 하나를 사용할 수 있습니다. :

1. CSS Flexbox 방법

이 방법에는 flexbox 속성을 사용하여 요소의 플렉스 방향, 정렬 및 정렬을 설정하는 작업이 포함됩니다.

CSS 코드:

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

이 코드는 요소를 수직으로 쌓고 수평 및 중앙에 배치하는 유연한 컨테이너를 생성합니다. 수직으로.

2. CSS 테이블 및 위치 지정 방법

이 방법은 display: table 및 Vertical-align: middle 속성을 사용하여 div 내에서 요소를 수직으로 정렬합니다.

CSS 코드:

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

이 코드는 body 요소를 표처럼 동작하게 하며, #container div는 표 셀로 배치되고 중간.

권장

Flexbox는 현대적인 접근 방식, 유연성 및 사용 편의성으로 인해 일반적으로 테이블 및 위치 지정 방법보다 권장됩니다.

위 내용은 Div 내부의 두 요소를 수직 중앙에 어떻게 배치합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!