CSS 수평 및 수직 센터링 방법 요약

프로젝트에서 요소를 가로 및 세로 중앙에 배치해야 하는 경우가 종종 있습니다. 그리고 구체적인 시나리오도 다르기 때문에 시청자분들께 도움이 되길 바라면서 개인적인 요약 방법을 정리해보겠습니다.
아래에 제공된 예는 모두 HTML을 기반으로 하며 여기에는 몇 가지 일반적인 스타일이 지정되어 있습니다.

body {
    background-color: #efefef; 
}
main {
    background-color: #fff;
    padding: 10px;
    margin:10px 0px;
}
main p {
    background-color: #aaf;
}

가로 중심

1 블록 수준 상위 요소와 관련하여 하위 요소는 인라인 또는 인라인 블록 요소로 설정될 수 있습니다. 상위 요소는 텍스트 정렬 속성을 설정합니다

.

예:

.parent1 {
    text-align:center;
}
.child1 {
    display:inline|inline-block;
}

2 상위 요소와 하위 요소가 모두 블록 수준 요소인 경우 하위 요소에 너비 값을 지정한 후 여백을 추가합니다. auto

<main class="parent2">
    <p class="child2">我是孩子2，我要水平居中</p>
</main>
.child2 {
    width:60%;
    margin:auto;
}

3 경우 가로 중앙에 여러 개의 하위 요소가 있는 경우 두 가지 방법이 있습니다

3.1 하위를 인라인 또는 인라인 블록 요소로 설정하고 상위 요소에 text-align 속성을 설정합니다.

3.2 표시할 상위 요소: flex

<main class="parent4">
    <p class="child4">我是孩子4，我要水平居中</p>
    <p class="child4">我是孩子4，我要水平居中</p>
    <p class="child4">我是孩子4，我要水平居中</p>
</main>

.parent4 {
    display: flex;
    justify-content: center;
}
  .child4 {
    margin:10px;
}

수직 중앙

1 수직 중앙에 표시되도록 고정 패딩 값을 설정하는 것 외에도 line-height

를 사용할 수도 있습니다. line-height와 height의 값을 같은 값으로 설정하려면

<main class="parent5">
    <p class="child5">我是孩子5，我要垂直居中</p>
</main>
.child5 {
    height:50px;
    line-height: 50px;
}

2 다중 라인인 경우 수직 정렬을 사용하여 테이블처럼 테이블 셀 모드로 표시할 수 있습니다

<main class="parent6">
    <p class="child6">我是孩子6，我要垂直居中</p>
    <p class="child6">我是孩子6，我要垂直居中</p>
    <p class="child6">我是孩子6，我要垂直居中</p>
</main>
.parent6 {
    display: table;
}
.child6 {
    display: table-cell;
    border:2px solid #000;
    vertical-align: middle;
}

3 절대 위치 지정을 통해

<main class="parent7">
    <p class="child7">我是孩子7，我要垂直居中</p>
</main>
/*如果知道子元素宽高*/
.parent7 {
    position: relative;
    height: 100px;
}
.child7 {
    position: absolute;
    top:50%;
    height:60px;
    margin-top:-30px;
}
/*如果不知道子元素宽高*/
.parent7 {
    position: relative;
    height: 100px;
}
.child7 {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}

4 flex 사용

<main class="parent8">
    <p class="child8">我是孩子8，我要垂直居中</p>
</main>
.parent8 {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

가로 및 세로 모두 가운데 배치

1 절대 위치 지정 사용

<main class="parent9">
    <p class="child9">我是孩子9，我要水平垂直居中</p>
</main>
 /*如果不知道子元素宽高*/
.parent9 {
    position: relative;
    height: 150px;
}
.child9 {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
/*如果知道子元素宽高*/
.parent9 {
    position: relative;
    height: 150px;
}
.child9 {
    position: absolute;
    top:50%;
    left:50%;
    height:60px;
    width:100px;
    margin-left:-50px;
    margin-top:-30px;
}

2 사용 flex

.parent10 {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.child10 {
    margin: auto;
}

3 또한 위의 방법을 각각 가로 및 세로로 가운데에 맞추고 일치시켜 볼 수도 있습니다. 물론 아직 발견되지 않은 다른 방법도 있을 것입니다.

위 결과 출력 스크린샷

더 많은 CSS 수평 및 수직 센터링 방법 요약 관련 기사를 보려면 결제하세요. PHP 중국어 웹사이트에 주목하세요!