Question

我需要垂直和水平居中一个div，并且它的大小是整个页面的一定百分比（比如说80％）。

我可以使用vh和vw单位执行此操作（link）

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

...或旧桌面设计（link）

<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版本。任何人都可以提供任何帮助吗？

Answer 1

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

<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 example

在此示例中，#inner的宽度和高度为#wrapper的50％，即页面正文的宽度和高度的100％。

由于#wrapper在显示为table-cell的正文中显示为table，其中的内容将受vertical-align:middle属性的影响，从而导致#inner分隔符位于页面的垂直中间。

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

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

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

中心元素的百分比大小与页面大小

1 个答案: