CSS를 사용하여 요소의 수직 중앙 정렬을 달성하는 여러 방법에 대한 간략한 설명

CSS를 사용하여 요소를 가로 중앙에 배치합니다. 행 수준 요소는 상위 요소의 텍스트 정렬 중심을 설정하고 블록 수준 요소는 설정합니다. 자신의 왼쪽 오른쪽 여백을 자동으로 설정하세요. 이 기사에서는 CSS를 사용하여 요소를 수직으로 중앙에 배치하는 6가지 방법을 수집했습니다. 살펴보겠습니다!

Line-Height 방법

시험: 한 줄 텍스트 세로 중앙 정렬, 데모

코드:

html

<p id="parent">
    <p id="child">Text here</p>
</p>

css

#child {
    line-height: 200px;
}

이미지를 세로 중앙에 배치하면 코드는 다음과 같습니다

html

<p id="parent">
    <img src="image.png" alt="" />
</p>

css

#parent {
    line-height: 200px;
}
#parent img {
    vertical-align: middle;
}

CSS 테이블 방법

적용 가능: 범용, 데모

코드:

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

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

낮은 버전 IE 수정 버그:

#child {
    display: inline-block;
}

절대 위치 지정 및 음수 여백

적용 가능: 블록 수준 요소, 데모

코드:

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

절대 위치 지정 및 늘이기

적용 가능: 범용, IE에서는 사용할 수 없음 버전이 7보다 낮습니다. 정상적으로 작동합니다. 데모

코드:

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

상단 및 하단 패딩 동일

적용 가능: Universal, 데모

코드:

html

<p id="parent">
    <p id="child">Content here</p>
</p>

css

#parent {
    padding: 5% 0;
}
#child {
    padding: 10% 0;
}

Floater p

적용: 범용, 데모

코드:

html

<p id="parent">
    <p id="floater"></p>
    <p id="child">Content here</p>
</p>

css

#parent {height: 250px;}
#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#child {
    clear: both;
    height: 100px;
}

위의 6가지 방법은 다음과 같습니다. 실제 사용에 적합하도록 선택하세요.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 입문을 방문하세요! !