div 중간에 div

<div>을 다른 곳에 배치하고 가운데에 배치하려고합니다. 당신이 볼 수처럼div 중간에 div

#redthing { 
margin-top: 2px; 
background-color: #f00d28; 
height: 250px; 
} 

#whitebox { 
margin: 0 auto; 
margin-top: 10px; 
padding-top: 20px; 
height: 10px; 
width: 400px; 
background-color: white; 
border:5px solid #000; 
}

것은, 패딩과 마진 (페이지의 중간에 중심을 작동하지 않습니다 코드는 다음입니다 -

<div id="redthing"> 
<div id="whitebox" > 
</div> 
</div>

.CSS가 : 내 방법이있다 즉 whitebox 및 상단과 redbox의 바닥 사이에 같은 장소가 있다는 것을 의미한다. 이의 당신이 무엇을 살펴 보자,

출처

2012-07-22 user896692

참조 http://stackoverflow.com/questions/396145/whats-the-best-을 :

당신에게 중 하나는 패딩과 마진 정확한 금액을 추가, 또는이 사용 확인해야 way-of-centering-a-div-vertical-with-css –

잘 도와주세요.이 도면의 모든 라인은 heig에 10px를 나타냅니다 ht :

┏━━━━━━━━━━━━━━━━━━━━━┓ 
┃10px margin top  ┃ 
┃┌─────────────────────┐┃ 
┃│20px padding top  │┃ 
┃│padding continues │┃ 
┃│10px height   │┃ 
┃└─────────────────────┘┃ 
┃      ┃ 
┊ lots of empty space ┊ 
┃      ┃ 
┗━━━━━━━━━━━━━━━━━━━━━┛

어떻게 작동하는지 설명해주세요.

/* add this to the container */ 
position: relative; 

/* add this to the inner box */ 
position: absolute; 
top: 50%; 
margin-top: -Xpx; 
/* where X is half the offsetHeight of the box - ie. (height+padding+border)/2 */

출처

2012-07-22 17:14:34

당신은 저를 때려 눕 힙니다! – cereallarceny

@Fresheyeball 상자 그림을 ░▒하려고한다면 내 대답을 편집하지 마십시오. –

@Kolink 죄송합니다. 줄 바꿈이 잘못되었다고 생각했습니다. 내 잘못이야. – Fresheyeball

div 중간에 div

답변

관련 문제