html – 具有百分比大小的中心元素与页面大小

2019年8月4日 124次阅读

我需要垂直和水平居中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版本.有人可以提供任何帮助吗？

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

<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在显示为表格的正文中显示为表格单元格,因此其中的内容将受vertical-align：middle属性的影响,导致#inner分隔符位于页面的垂直中间.

应用保证金：0自动;到#inner divider然后将它对齐到水平中间.

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

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

点赞