HTML垂直對齊

什麼是讓垂直居中的div最快捷的方式 - 跨瀏覽器？HTML垂直對齊

HTML：

<body> 
    <div id="mainContainer"> 
     <header> 
      blah 
      </header><!-- End header --> 
     </div><!-- End mainContainer --> 

</body>

CSS：

#mainContainer{ 
    width:960px; 
    margin:60px auto; 
    background:#FFF; 
    border:1px solid black; 
} 
header{ 
    padding:30px 0 30px 0; 
    background:red; 
    margin:0 auto; 
}

來源

2012-04-27 Jess McKenzie

嘿請使用簡單的方法

https://stackoverflow.com/a/10010055/1312610

http://jsfiddle.net/ERuX4/1/

來源

2012-04-27 05:14:56 ShibinRagh

嘿。什麼的 - 200代表我有一個盒子600px的範圍廣，偏離中心 – 2012-04-27 05:32:44

嘿你能請張貼代碼http://jsfiddle.net，就可以解決這個問題 – ShibinRagh 2012-04-27 05:36:20

http://jsfiddle.net/e2bmC/和HTTP： //cl.ly/060H2r3R2S3a3U0j021Z – 2012-04-27 06:28:35

如果你可以指定一個高度，那麼你可以使用

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

在負利潤一半的寬度和hei GHT分別

來源

2012-04-27 04:47:41

嘿，我得到如下：http://cl.ly/1p3k1A2l033a1g1p3Z1J – 2012-04-27 04:54:38

看起來像左：50％的人不採取。您想要將其居中放置的父元素需要有一個位置：相對聲明，但如果您只是相對於「body」居中，則不需要這樣做。如果你把它發佈到我可以看到代碼的地方，我可以告訴你發生了什麼。 http://jsfiddle.net/ – 2012-04-28 02:36:14

回答

相關問題