如何在沒有腳本的情況下使div水平和垂直居中？

Question

如何在沒有腳本的情況下使div水平和垂直居中？ 僅限CSS和HTML5？

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

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

Answer 1

對於固定尺寸：

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

如果你想用屏幕調整div大小，你可以使用這種技術 ，也適用於div 。

Answer 2

你有沒有嘗試過CSS 3 box-align？

#center {
    box-align: center;
}

在此處查找更多信息： http ： //hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Answer 3

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>

Answer 4

只需添加以下內容：margin-left：auto; margin-right：auto;

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

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