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的{{3}}。

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 ;
}

如何在没有脚本的情况下使div水平和垂直居中？

4 个答案: