집 > 기사 > 웹 프론트엔드 > CSS에서 div를 세로로 가운데에 맞추는 방법

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

php中世界最好的语言원래의: 2017-11-27 09:54:421624검색

높이와 너비가 고정된 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!