如何使水平和垂直居中沒有腳本的中心？

如何使水平和垂直居中沒有腳本的div？只能在CSS和HTML5上使用？如何使水平和垂直居中沒有腳本的中心？

<div id="center"></div> 

#center{width:500px; height:300px;}

來源

2011-08-24 Ilya Medvedev

你說的是這個div內的文本或在div本身？ – Nayish

可能的重複：http://stackoverflow.com/questions/3489781/how-can-i-vertically-and-horizontally-center-a-div-within-a-larger-div – JMax

關於div本身 –

對於固定尺寸：

#center{ 
    width:500px; 
    height:300px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-150px 0 0 -250px; 
}

如果你想你可以使用this technique的屏幕，該屏幕爲div太工程，以調整您的div 。

來源

2011-08-24 09:28:05 MatTheCat

是的，工作，謝謝！ –

不客氣^^，所以你可以檢查我的答案旁邊的標記。 – MatTheCat

完成，謝謝:) –

只是添加這個東西： margin-left：auto; margin-right：auto;

所以，你的中心應該是這樣的：

#center 
{width:500px; 
height:300px; 
margin-left: auto ; 
margin-right: auto ; 
}

來源

2011-08-24 09:26:03

不，這個只是水平居中 –

您是否嘗試過CSS 3 box-align？

#center { 
    box-align: center; 
}

在這裏找到更多的信息：http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

來源

2011-08-24 09:32:09

我已經試過了，但它沒有工作 –

也許你需要添加供應商特定的前綴： * -moz-box-align：center; * for Firefox或* -webkit-box-align ：center; *對於Safari和Chrome –

我不喜歡webkit和moz，但是謝謝） –

body, html {height:100%} 
.mydiv {width:300px; height:300px; margin:auto; background:#FF0000} 
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> 
    <tr> 
    <td align="center" valign="middle"><div class="mydiv"></div></td> 
    </tr> 
</table>

來源

2011-09-02 11:55:04

如何使水平和垂直居中沒有腳本的中心？

回答

相關問題