CSS에서 div를 세로로 가운데에 맞추는 방법-HTML 튜토리얼-php.cn

CSS에서 div를 세로로 가운데에 맞추는 방법

php中世界最好的语言

풀어 주다： 2017-11-27 09:54:42

원래의

1630명이 탐색했습니다.

높이와 너비가 고정된 div가 웹페이지에서 수직 중앙에 배치된다면 매우 간단할 것입니다. 하지만 높이와 너비가 고정된 div라면 수직 중앙에 배치하는 방법은 무엇입니까? ? 그렇다면 이 div는 어떻게 수직 중앙에 놓이게 될까요? 이번 글에서는

Fixed height and width div 수직 센터링

enter image description here

로그인 후 복사

위의 그림과 같이 고정된 높이와 너비는 매우 간단하게 다음과 같이 작성되었습니다.

 position: absolute;
 left: 50%;
 top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

로그인 후 복사

고정되지 않은 높이의 수직 센터링 방법 및 너비 div

방법 1:

"유령" 의사 요소(보이지 않는 의사 요소)와 인라인 블록 / vertical-align을 사용하면 매우 영리한 센터링을 달성할 수 있습니다. 그러나 이 방법을 사용하려면 중앙에 배치할 요소가 인라인 블록이어야 하는데 이는 진정한 보편적인 솔루션이 아닙니다.

html은 다음과 같습니다.

<div style="height: 300px;">
    <div>
        <h1>haorooms案例题目</h1>
        <p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
    </div>
</div>

로그인 후 복사

css는 다음과 같습니다.

/* This parent can be any width and height */
.block {
  text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: &#39;&#39;;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

로그인 후 복사

방법 2:

테이블 레이아웃 방법을 사용할 수 있지만 이 방법에도 한계가 있습니다!

작성 방법은 다음과 같습니다.

<table style="width: 100%;">
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Unknown stuff to be centered.
     </td>
  </tr>
</table>

로그인 후 복사

테이블 작성에는 시간이 더 많이 걸리기 때문에 테이블 대신 div를 사용할 수도 있습니다. 작성 방법은 다음과 같습니다.

html:

<div>
   <div>
       Unknown stuff to be centered.
   </div>
</div>
css:
.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

로그인 후 복사

방법 3, 궁극적인 해결책. :

위 2가지 방법에는 한계가 있을 수 있습니다. 물론 제가 소개한 세 번째 방법은 고정된 높이와 너비 div가 아닌 좀 더 성숙한 수직 센터링 방법입니다! 하지만 방법은 CSS3로 작성되어 있습니다. IE8과 호환되기를 원하는 어린이들은 위의 방법을 사용하는 것이 좋습니다!

방법은 고정 높이 및 너비와 유사하지만 여백 없이 번역()을 사용합니다.

데모는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>haorooms不固定高度div写法</title>
    <style>
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #000;
  width:50%;
  height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

로그인 후 복사

위의 내 CSS는 웹킷 커널 브라우저에만 해당되며 다른 커널 브라우저는 다음과 같이 작성됩니다. :

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

로그인 후 복사

각 브라우저의 작성 방법은 이전 기사를 참조하세요: http://www.haorrooms.com/post/css_common

일부 팝업 레이어 스타일도 이 방법을 사용하여 중앙에 배치할 수 있습니다

position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

로그인 후 복사

css3 가변 폭과 높은 레벨의 수직 센터링

단 세 문장만으로 가변 폭과 높은 레벨의 수직 센터링을 구현할 수 있습니다.

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;

로그인 후 복사

위의 3개 문장을 상위 요소에 추가하여 하위 요소의 수평 및 수직 중앙 정렬을 구현합니다.

수직 중앙 정렬에는 margin:auto를 사용하세요.

여백 값을 auto로 설정하면 남은 공간을 할당할 수 있습니다! 우리는 블록 수준 요소가 margin:0 자동으로 설정되어 왼쪽, 오른쪽 및 가운데에 표시될 수 있다는 것을 알고 있습니다. margin:auto로 설정한 후 여백을 상하좌우 중앙에 맞추는 방법이 있나요? 위, 아래, 왼쪽, 오른쪽의 중심을 맞추면 수직 중심을 이룰 수 있습니다!

답은 '예'입니다. 상단과 하단에 충분한 공간을 허용하는 한 마진이 상단과 하단 공간을 자동으로 할당하도록 할 수 있습니다.

위치 지정을 사용하여 위, 아래, 왼쪽, 오른쪽 여백에 충분한 공간을 제공할 수 있습니다! 그런 다음 margin:auto를 사용하여 수직 센터링을 달성할 수 있습니다!

HTML 구현은 다음과 같습니다. (간단한 수직 팝업 상자 만들기)

<div>
    <div></div>
</div>

로그인 후 복사

CSS 코드는 다음과 같습니다. 매우 간단하고 호환성이 좋습니다. IE8+

.father{position:fixed;width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
.son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}

로그인 후 복사

을 지원합니다. 수직 센터링은 매우 간단하지 않습니까? 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!