div를 수직으로 중앙에 배치하는 여러 가지 방법

저자：Eve Cole 업데이트 시간：2013-03-25 17:35:46

이 문제에 대해 이야기할 때 어떤 사람들은 "CSS에 수직 중앙 정렬을 설정하는 수직 정렬 속성이 있지 않나요?"라고 묻습니다. 일부 브라우저가 이를 지원하지 않더라도 약간의 CSS만 하면 됩니다.

해킹기술이면 충분하다! 여기서 몇 마디 말씀드리자면 CSS에는 실제로 수직 정렬 속성이 있지만 (X) HTML 요소에 valign 속성이 있는 요소에만 발생합니다.

<td>, <th>, <caption> 등과 같은 테이블 요소에는 효과적입니다. <div> 및 <span>과 같은 요소에는 valign 기능이 없으므로 수직 정렬을 사용할 수 없습니다.

효과.

관련 튜토리얼: div를 수평으로 중앙에 배치하는 N 가지 방법

1. 단일 행 수직 센터링

컨테이너에 텍스트 줄이 하나만 있는 경우 중앙에 배치하는 것은 상대적으로 간단합니다. 실제 높이를 줄 높이와 동일하게 설정하기만 하면 됩니다.

좋다:

div {
높이:25px;
줄 높이:25px;
오버플로:숨김;
}
이 코드는 매우 간단합니다. 나중에 내용이 컨테이너를 초과하거나 자동으로 줄바꿈이 발생하는 것을 방지하기 위해 Overflow:hidden 설정을 사용하므로 수직 중앙 정렬 효과를 얻을 수 없습니다. 더 많은 CSS 교육

절차.

2. 높이를 알 수 없는 여러 줄의 텍스트를 세로로 가운데 맞춤

콘텐츠의 높이가 가변적이라면 이전 섹션에서 언급한 수평 중앙 정렬을 달성하는 데 사용된 마지막 방법을 사용할 수 있습니다.

패딩 값은 동일할 수 있습니다. 다시 말하지만, 이것은 수직 중심을 "보는" 방법이며, 텍스트가 <div>를 완전히 채우도록 만드는 방법일 뿐입니다. 당신은 다음과 같은 것을 사용할 수 있습니다

다음 코드:

div {
패딩:25px;
}
이 방법의 장점은 모든 브라우저에서 실행될 수 있고 코드가 매우 간단하다는 점이지만, 이 방법의 전제 조건은 컨테이너 높이를 확장할 수 있어야 한다는 것입니다.

</body>
</html>
3. 고정된 높이로 여러 줄의 텍스트를 중앙에 배치

이 기사의 시작 부분에서 CSS의 수직 정렬 속성은 valign 속성이 있는 (X)HTML 태그에서만 작동하지만 CSS에도 표시가 있다고 말했습니다.

이 속성은 <table>을 시뮬레이션할 수 있으므로 이 속성을 사용하여 <div>가 <table>을 시뮬레이션하고 수직 정렬을 사용할 수 있습니다. 디스플레이:테이블 및

display:table-cell을 사용하는 방법, 전자는 상위 요소에 설정되어야 하고 후자는 하위 요소에 설정되어야 하므로 위치를 지정해야 하는 텍스트에 대해 또 다른 <div> 요소를 추가해야 합니다.

div#wrap {
높이:400px;
표시:테이블;
}
div#콘텐츠 {
수직 정렬:가운데;
디스플레이:테이블 셀;
테두리:1px 솔리드 #FF0099;
배경색:#FFCCFF;
너비:760px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<title> 여러 줄 텍스트의 세로 가운데 맞춤</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<스타일 유형="텍스트/css">
본문 {글꼴 크기:12px;글꼴-가족:타호마;}
div#wrap {
높이:400px;
표시:테이블;
}
div#콘텐츠 {
수직 정렬:가운데;
디스플레이:테이블 셀;
테두리:1px 솔리드 #FF0099;
배경색:#FFCCFF;
너비:760px;
}
</style>
</head>
<본문>
<div id="줄바꿈">
<div id="content"><pre>이제 이 텍스트를 수직으로 중앙에 배치하겠습니다! Webjx.Com
div#wrap {
높이:400px;
표시:테이블;
}
div#콘텐츠 {
수직 정렬:가운데;
디스플레이:테이블 셀;
테두리:1px 솔리드 #FF0099;
배경색:#FFCCFF;
너비:760px;
}
</pre></div>
</div>
</body>
</html>
이 방법이 이상적이지만 불행하게도 Internet Explorer 6은 디스플레이:테이블과 디스플레이:테이블-셀을 올바르게 이해하지 못하므로 이 방법은 다음에서 사용됩니다.

Internet Explorer 6 이하에서는 유효하지 않습니다. 글쎄요, 정말 우울하네요! 그러나 다른 방법도 있습니다. 4. Internet Explorer의 해결 방법.

Internet Explorer 6 이하에서는 높이 계산에 결함이 있습니다. Internet Explorer 6에서 상위 요소를 배치한 후 하위 요소를 배치하면

백분율 계산을 수행할 때 계산 기준이 상속되는 것 같습니다(위치 값이 절대값이면 문제가 없지만 백분율 계산 기준은 더 이상 해당 요소의 기준이 되지 않습니다).

상위 요소에서 상속된 위치 지정 높이 대신 높이). 예를 들어 다음과 같은 (X)HTML 코드 조각이 있습니다.

<div id="줄바꿈">
<div id="하위 랩">
<div id="콘텐츠">
</div>
</div>
</div>
하위 랩에서 절대 위치 지정을 수행하면 콘텐츠도 이 속성을 상속합니다. 비록 콘텐츠가 추가로 위치 지정되면 페이지에 즉시 표시되지는 않습니다.

행이 서로 상대적으로 배치되면 사용하는 100% 비율은 더 이상 내용의 원래 높이가 아닙니다. 예를 들어, 하위 줄 바꿈 위치를 40%로 설정하면 콘텐츠를

가장자리가 랩과 겹치는 경우 top:-80%를 설정해야 하며, 하위 랩의 top:50%를 설정하면 100%를 사용하여 내용을 원래 위치로 되돌려야 합니다.

, 하지만 콘텐츠도 50%로 설정하면 어떻게 될까요? 그러면 정확히 수직 중앙에 놓이게 됩니다. 따라서 이 방법을 사용하여 Internet Explorer 6에서 수직 중앙 정렬을 구현할 수 있습니다.

div#wrap {
테두리:1px 솔리드 #FF0099;
배경색:#FFCCFF;
너비:760px;
높이:400px;
위치:상대적;
}
div#subwrap {
위치:절대;
테두리:1px 솔리드 #000;
상단:50%;
}
div#콘텐츠 {
테두리:1px 솔리드 #000;
위치:상대적;
상단:-50%;
}
물론 이 코드는 Internet Explorer 6과 같은 컴퓨팅 문제가 있는 브라우저에서만 작동합니다. (근데 이해가 안가네요. 기사를 많이 봤는데,

똑같나요? 아니면 어떤 이유에서인지 많은 사람들이 Internet Explorer 6의 이 버그에 대한 원리를 설명하기를 꺼리는 것 같습니다. 저는 피상적으로만 이해하고 있으며 더 자세히 연구해야 합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<title> 여러 줄 텍스트의 세로 가운데 맞춤</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<스타일 유형="텍스트/css">
본문 {글꼴 크기:12px;글꼴 가족:타호마;}
div#wrap {
테두리:1px 솔리드 #FF0099;
배경색:#FFCCFF;
너비:760px;
높이:400px;
위치:상대적;
}
div#subwrap {
위치:절대;
상단:50%;
}
div#콘텐츠 {
위치:상대적;
상단:-50%;
}
</style>
</head>
<본문>
<div id="줄바꿈">
<div id="하위 랩">
<div id="content"><pre>이제 이 텍스트를 수직으로 중앙에 배치하겠습니다!
div#wrap {
테두리:1px 솔리드 #FF0099;
배경색:#FFCCFF;
너비:760px;
높이:500px;
위치:상대적;
}
div#subwrap {
위치:절대;
테두리:1px 솔리드 #000;
상단:50%;
}
div#콘텐츠 {
테두리:1px 솔리드 #000;
위치:상대적;
상단:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>
5. 완벽한 솔루션

그러면 위의 두 가지 방법을 결합하여 완벽한 솔루션을 얻을 수 있지만 이를 위해서는 CSS 해킹에 대한 지식이 필요합니다. CSS Hack을 사용하여 브라우저를 구별하려면 다음을 수행하십시오.

"간단한 CSS 해킹: IE6, IE7, IE8, Firefox 및 Opera 구별" 기사를 참조하십시오.

div#wrap {
표시:테이블;
테두리:1px 솔리드 #FF0099;
배경색:#FFCCFF;
너비:760px;
높이:400px;
_위치:상대적;
오버플로:숨김;
}
div#subwrap {
수직 정렬:가운데;
디스플레이:테이블 셀;
_위치:절대;
_상단:50%;
}
div#콘텐츠 {
_위치:상대적;
_top:-50%;
}
이 시점에서 완벽한 센터링 솔루션이 생성됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<title> 여러 줄 텍스트의 세로 가운데 맞춤</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<스타일 유형="텍스트/css">
본문 {글꼴 크기:12px;글꼴-가족:타호마;}
div#wrap {
표시:테이블;
테두리:1px 솔리드 #FF0099;
배경색:#FFCCFF;
너비:760px;
높이:400px;
_위치:상대적;
오버플로:숨김;
}
div#subwrap {
수직 정렬:가운데;
디스플레이:테이블 셀;
_위치:절대;
_상단:50%;
}
div#콘텐츠 {
_위치:상대적;
_top:-50%;
}
</style>
</head>
<본문>
<div id="줄바꿈">
<div id="하위 랩">
<div id="content"><pre>이제 이 텍스트를 수직으로 중앙에 배치하겠습니다!
div#wrap {
테두리:1px 솔리드 #FF0099;
배경색:#FFCCFF;
너비:760px;
높이:500px;
위치:상대적;
}
div#subwrap {
위치:절대;
테두리:1px 솔리드 #000;
상단:50%;
}
div#콘텐츠 {
테두리:1px 솔리드 #000;
위치:상대적;
상단:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>
ps 수직 센터링 수직 정렬의 값은 중간이고, 수평 센터링 정렬의 값은 모두 중앙이지만 키워드는 다릅니다.