4

我需要将 div 垂直和水平居中，并使其大小占整个页面的一定百分比（比如 80%）。

我可以用 vh 和 vw 单位来做到这一点（链接）

<style>
html, body
{
    height: 100%;
    width: 100%;
    margin: 0;
}

body > div
{
    position: absolute;
    background-color: red;
    top: 10vh;
    left: 10vw;
    width: 80vw;
    height: 80vh;
}
</style>
<div></div>

...或旧表设计（链接）

<style>
html, body
{
    margin: 0;
    height: 100%;
}

#center
{
    background-color: red;
}
</style>
<table height="100%" width="100%">
    <tr height="10%"></tr>
    <tr>
        <td width="10%"></td>
        <td id="center"></td>
        <td width="10%"></td>
    </tr>
    <tr height="10%"></tr>
</table>

但我想支持一个 div 版本。任何人都可以提供任何帮助吗？

4

1 回答 1

2

在页面中间显示分隔线的常用方法是将其显示为带有表格单元格的表格：

<body>
    <div id="wrapper">
        <div id="inner">
        </div>
    </div>
</body>

html, body { margin:0; height:100%; }
body { display:table; width:100%; }
#wrapper { display:table-cell; vertical-align:middle; height:100%; width:100%; }
#inner { height:50%; width:50%; margin:0 auto; }

JSFiddle 示例。

在这个例子中，#inner是 50% 的宽度和高度，#wrapper其中 100% 的宽度和高度是页面正文。

as#wrapper在显示为table-cell的 body 内显示为table，其内的内容会受到该vertical-align:middle属性的影响，导致#inner分隔线位于页面的垂直中间。

应用于分隔线margin:0 auto;，#inner然后将其与水平中间对齐。

这样做的好处是您无需担心偏移#inner分隔线，并且不仅限于使用百分比宽度。固定宽度仍将在包含的中间对齐#wrapper。

所有现代浏览器都支持此功能：http: //caniuse.com/#feat=css-table

于 2013-05-30T21:12:09.423 回答