全屏垂直居中HTML页面的方法？ [英] Method for full-screen vertically-centered HTML page?

问题描述

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

I'm looking for a valid cross-browser solution for an HTML page which:

1. 使用100％的屏幕高度，没有溢出（即没有滚动）


2. 具有垂直（和水平）居中的< div>

1. Consumes 100% of the screen height, with no overflow (i.e. no scrolling)
2. has a vertically (and horizontally) centered <div> which will hold the main content

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

I know vertical centering is possible when the wrapping container has a static height. Is adjusting this height to browser window height something feasable? (Preferably, no JS should be used.)

推荐答案

取决于cross browser的意思。下面的工作正常与所有当前，标准兼容的（因此不是IE6）：

Depends on what you mean with "cross browser". Following works fine with all current, standards compatible ones (thus not 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/

这篇关于全屏垂直居中HTML页面的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！