CSS에서 상단과 하단을 중앙에 배치하는 방법은 무엇입니까?

CSS 상단 및 하단 중앙 정렬 구현 방법: 1. 인라인 요소의 단일 행 높이를 상자 높이와 동일하게 설정합니다. 2. 다중 행 인라인 요소를 사용하여 "display:table-cell; 및 수직-"을 설정합니다. align: middle;"을 상위 요소에; "그게 다입니다.

CSS에서 위쪽 및 아래쪽 센터링은 수직 센터링이기도 합니다. CSS에는 요소를 기반으로 하는 세 가지 수직 센터링 방법이 있는데, 이는 단일 라인 인라인 요소, 다중 라인 인라인 요소 및 블록 요소의 수직 센터링입니다. 자세한 소개는 다음과 같습니다.

한 줄 인라인 요소

한 줄 인라인 요소에 대해 "행 높이를 상자 높이와 동일"로 설정하기만 하면 됩니다.

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
        height: 300px;
    }
</style>
 
<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

효과:

여러 줄 인라인 요소

display:table-cell; 및 Vertical-align: middle;을 상위 요소로 설정하세요.

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">

저는 여러 줄 인라인입니다. 요소 나는 여러 줄이 있는 인라인 요소입니다. 나는 여러 줄이 있는 인라인 요소입니다. 나는 여러 줄이 있는 인라인 요소입니다. 여러 줄이 있는 인라인 요소입니다.

< ;/div>

효과:

블록 수준 요소

옵션 1: 위치 지정 사용

먼저 상위 요소를 상대 위치로 설정한 다음 하위 요소를 절대 위치로 설정하고 하위 요소 상단을 50%로 설정합니다. 즉, 하위 요소의 왼쪽 상단 모서리를 수직으로 가운데에 배치합니다.

고정 높이: 설정 절대 하위 요소의 여백 상단: -요소 높이의 절반 픽셀; 또는 변환 설정:translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

가변 높이: 새로운 CSS3 속성 사용 변환:translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

효과:

옵션 2: flexbox 레이아웃 사용(높이는 고정되거나 가변적일 수 있음)

flexbox 레이아웃을 사용하고 속성만 추가하세요. display: align-items: center; :

관련 튜토리얼:

CSS 비디오 튜토리얼

위 내용은 CSS에서 상단과 하단을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!