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

本文介绍了全屏垂直居中HTML页面的方法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

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

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

Consumes 100% of the screen height, with no overflow (i.e. no scrolling)

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

活动示例：

jsfiddle/mGPmr/1/