CSS가 수평 및 수직 센터링을 동시에 달성하기 위한 5가지 아이디어에 대한 자세한 설명-CSS 튜토리얼-php.cn

다음 편집기에서는 CSS를 사용하여 수평 및 수직 중앙 정렬을 동시에 달성하기 위한 5가지 아이디어에 대한 간략한 분석을 제공합니다. 편집자는 꽤 좋다고 생각합니다. 이제 공유하여 참고자료로 삼겠습니다.

수평 중심과 수직 중심이 별도로 소개됩니다. 5가지 아이디어를 동시에 도입

아이디어 1: text-align + line-height 한 줄 텍스트의 가로 및 세로 중앙 정렬

<style>   
.test{   
    text-align: center;   
    line-height: 100px;   
}   
</style>

로그인 후 복사

XML/HTML 코드클립보드에 콘텐츠 복사

<p class="test" 스타일="배경색: 연한 파란색;너비: 200px;">테스트 텍스트 p>

아이디어 2 : text-align + vertical-align

【1】상위 요소에 text-align, Vertical-align을 설정하고 상위 요소를 테이블로 설정 -cell 요소와 하위 요소를 inline-block 요소로

[참고] IE7 브라우저와 호환되는 경우 테이블 셀 사용 효과를 얻으려면 구조를

display:inline;zoom:1; 인라인 달성- 블록의 효과

<style>   
.parent{   
    display: table-cell;   
    text-align: center;   
    vertical-align: middle;   
}   
.child{   
    display: inline-block;   
}   
</style>

로그인 후 복사

<p class="parent" style="background-color: gray; width:200px; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

로그인 후 복사

[2] 하위 요소가 이미지인 경우 테이블 -cell은 사용할 수 없지만 상위 요소는 높이 대신 행 높이를 사용하고 글꼴 크기는 0으로 설정됩니다. 하위 요소 자체는 Vertical-align:middle

<style>   
.parent{   
    text-align: center;   
    line-height: 100px;   
    font-size: 0;   
}   
.child{   
    vertical-align: middle;   
}   
</style>

로그인 후 복사

<p class="parent" style="background-color: gray; width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</p>

로그인 후 복사

세 가지 아이디어: 여백<🎜을 설정합니다. > + 수직 정렬　

상위 요소에서 수직 정렬을 설정하려는 경우, 블록 요소 내용을 수평 중앙에 맞추려면 margin:0 자동을 테이블 셀 요소로 설정해야 합니다. 너비를 확장하려면 테이블 요소로 설정해야 합니다. 테이블 요소는 셀이 테이블을 중첩할 수 있는 것처럼 tabel-cell 요소 내에 중첩될 수 있습니다.

[참고] IE7 브라우저와 호환되는 경우 구조를

<style>   
.parent{   
    display:table-cell;   
    vertical-align: middle;   
}   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>

로그인 후 복사

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

로그인 후 복사

아이디어 4: 절대 사용

【1】절대 위치 요소의

박스 모델 기능을 사용하고 오프셋 속성 을 기준으로 margin:auto

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 0;   
    left: 0;   
    rightright: 0;   
    bottombottom: 0;   
    height: 50px;   
    width: 80px;   
    margin: auto;   
}   
</style>

로그인 후 복사

를 결정된 값으로 설정합니다. 🎜>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

로그인 후 복사

【2】절대 위치에 있는 요소의 오프셋 속성과 번역()

함수

자체 오프셋을 사용하여 수준에 도달 세로 센터링 효과 [참고] IE9 브라우저는

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    transform: translate(-50%,-50%);   
}   
</style>

로그인 후 복사

rrree

를 지원하지 않습니다.[3] 너비와 높이가 아래의 하위 요소는 알려져 있습니다. 음수 여백 값을 사용하여 수평 및 수직 중앙 정렬 효과를 얻을 수 있습니다.

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

로그인 후 복사

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    width: 80px;   
    height: 60px;   
    margin-left: -40px;   
    margin-top: -30px;   
}   
</style>

로그인 후 복사

아이디어 5: flex 사용　[참고] IE9 브라우저는

[1] margin:auto

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

로그인 후 복사

rrree

<🎜 사용을 지원하지 않습니다. >

[2] 확장 가능한 프로젝트의 경우 확장 가능한 컨테이너에서 주축 정렬 justify-content 및 교차 축 정렬 align-items를 사용합니다.

<style>   
.parent{   
    display: flex;   
}   
.child{   
    margin: auto;   
}   
</style>

로그인 후 복사

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

로그인 후 복사

위 기사에 대한 간략한 분석 CSS로 수평 및 수직 센터링을 동시에 달성하기 위한 5가지 아이디어는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 웹사이트.

위 내용은 CSS가 수평 및 수직 센터링을 동시에 달성하기 위한 5가지 아이디어에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!