Question

我正在为HTML页面寻找有效的跨浏览器解决方案：

消耗100％的屏幕高度，没有溢出（即没有滚动）
有一个垂直（和水平）居中的<div>，它将保存主要内容

我知道当包装容器具有静态高度时，可以进行垂直定心。将此高度调整到浏览器窗口高度是否可行？（最好不要使用JS。）

Answer 1

取决于您对“跨浏览器”的意思。以下适用于所有当前的，标准兼容的（因此不是IE6）：

<强> HTML：

<div id="a">
    <div id="b">
        <div id="content"></div>
    </div>
</div>

<强> CSS：

html, body, #a {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#a {
    display: table;
}

#b {
    display: table-cell;
    margin: 0;
    padding: 0;

    text-align: center;
    vertical-align: middle;
}

#content {
    border: 5px solid red;
    width: 100px;
    height: 100px;
    margin: auto;
}

直播示例：

http://jsfiddle.net/mGPmr/1/

Answer 2

如果没有JavaScript，至少不能使用CSS2或更早版本是不可能的（不确定CSS3是否可以实现这一点，有人澄清了这一点）。

其他提供的答案需要元素的绝对宽度和高度;我没有假设这样的要求。由于您不知道浏览器窗口的宽高比以可靠地使用固定大小的容器来存储内容，因此无法将流动元素垂直居中，这是您通常想要的。

Answer 3

你可以这样做。它看起来也适用于IE6：

<html> <head>

<script type="text/javascript"> </script>

<style type="text/css">

#container {    height: 100%;   width: 100%;    position: relative; }


#content {
    border: 5px solid red;
    width: 100px;
    height: 100px;
    position: relative;
    margin-left: -50px;
    margin-right: -50px;
    top: 50%;
    left: 50%; }


</style>


</head> <body>

<div id="container">
        <div id="content"></div> </div>

</body> </html>

全屏垂直居中的HTML页面的方法？

3 个答案: