다른 Div 내부에 Div를 수직 중앙에 배치하려면 어떻게 해야 합니까?

다른 Div 내부에 Div를 수직으로 중앙에 배치

다른 div 내에 div를 중앙에 배치하려는 경우 첫 번째 접근 방식은 margin-top 및 margin-left 값을 사용하는 것입니다. , 아래 CSS 예에서 볼 수 있듯이:

#outerDiv {
    width: 500px;
    height: 500px;
    position: relative;
}

#innerDiv {
    width: 284px;
    height: 290px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -147px;
    margin-left: -144px;
}

그러나 이 방법은 내부 div의 크기가 조정될 때마다 조정이 필요합니다. 변화. 보다 일반적인 솔루션을 위해 다음 옵션을 탐색할 수 있습니다.

Vertical Align Middle

vertical-align: middle을 사용하면 상위 컨테이너에서 div를 수직으로 정렬합니다. 이 기술을 사용하려면:

1. 상위 컨테이너를 표시하도록 설정: table-cell하고 이를 수직 정렬: 중간으로 설정합니다.
2. 표시할 내부 div 설정: inline- 블록.

모던 해결책:

1. 변환

변환은 더 간단한 접근 방식을 제공합니다.

1. 내부 div를 위쪽: 50%, 왼쪽: 50%로 절대 위치에 배치합니다.
2. 변환: 변환(-50%,-50%)을 통해 div를 둘 다 중앙에 배치합니다. 크기.

2. Flexbox

유연성을 갖춘 Flexbox는 가장 간편한 솔루션을 제공합니다.

1. 표시할 상위 컨테이너 설정: flex.
2. justify-content 사용 : center 및 align-items: 내부 div를 가로 및 세로로 중앙에 배치합니다.

선택하는 구체적인 방법은 호환성 요구 사항 및 기본 설정에 따라 다릅니다.

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