CSS를 사용하여 수직 중앙 정렬을 구현하는 7가지 방법 공유-CSS 튜토리얼-php.cn

CSS를 사용하여 수직 중앙 정렬을 구현하는 7가지 방법 공유

高洛峰

풀어 주다： 2017-03-21 17:10:54

원래의

1529명이 탐색했습니다.

오늘은 순수 CSS를 사용하여 수직 중앙 정렬을 구현하기 위해 제가 본 다양한 방법에 대해 알려드리겠습니다. 왜 이것을 첫 번째 기사로 만드나요? 이것은 제가 처음 프론트엔드 작업을 시작했을 때 배운 가장 유용한 지식이기 때문에 모든 분들도 이로부터 혜택을 받을 수 있기를 바랍니다!

CSS에서 가로 가운데 정렬을 구현하는 것은 매우 간단합니다. 인라인 요소는 상위 요소의 text-align:center를 설정하고 블록 수준 요소는 magrin:auto를 자체적으로 적용합니다. 그러나 수직 센터링을 달성하는 것은 우선 매우 일반적인 요구 사항이지만 실제로는 달성하기 어려운 경우가 많습니다. 특히 디자인 크기가 고정되어 있지 않은 경우 더욱 그렇습니다. 내가 찾은 몇 가지 방법은 다음과 같습니다.

방법 1: Line-heightline-height

(1) 한 줄 텍스트 중심

HTML 코드

<p class="box1">
<p class="box2">垂直居中</p>
</p>

로그인 후 복사

CSS 코드

 .box1{
   height: 200px;
 }
 .box2{
  line-height: 200px;
 }

로그인 후 복사

(2)이미지세로 중앙

HTML 코드

 <p class="box1">
   <img src="images/bg-sun.png" alt="">
 </p>

로그인 후 복사

CSS 코드

 .box1{
   line-height:200px;
 }
 .box1 img{
   vertical-align: middle;
 }

로그인 후 복사

방법 2: table-cell

CSS 코드

 .box1{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }

로그인 후 복사

방법 3: display:flex

(1) CSS 코드

 .box1{
   display: flex;
 }
 .box2{
   margin:auto;
 }

로그인 후 복사

(2) CSS 코드

 .box1{
   display: flex;
   justify-content:center;
   align-items:center;
 }

로그인 후 복사

방법 4: 절대 위치 지정 및 음수 여백

(1) CSS 코드

 .box1{ 
   position: relative; 
 } 
   .box2{ 
   position: absolute; 
   top: 50%; 
   left: 50%; 
   margin-top: -10px;/*减去子元素高度一半*/ 
   margin-left:-32px;/*减去子元素宽度一半*/
 }

로그인 후 복사

(2) CSS 코드

 .box2{
   position: absolute;
   top:calc(50% - 10px);/*减去子元素高度一半*/
   left:calc(50% - 32px);/*减去子元素宽度一半*/
 }

로그인 후 복사

방법 5: 절대 위치 지정 및 0

CSS 코드

 .box2{
   width: 50%;
   height: 50%;
   background: #555;
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
     }

로그인 후 복사

방법 6: 번역

(1) CSS 코드

 .box2{
   position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
 }

로그인 후 복사

(2) HTML 코드

 <body>
 <p class="box1">
 </p>
 </body>

로그인 후 복사

CSS 코드

 .box1{
   width: 200px;
   height: 200px;
   background: #666;
   margin: 50vh auto 0;
   transform: translateY(-50%);
 }

로그인 후 복사

방법 7: display:-webkit-box

CSS 코드

 .box2{
   display: -webkit-box;
   -webkit-box-pack:center;
   -webkit-box-align:center;
   -webkit-box-orient: vertical;
   text-align: center7 }

로그인 후 복사

위 내용은 CSS를 사용하여 수직 중앙 정렬을 구현하는 7가지 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!