CSS 灵活的高度垂直居中与CSS，超越IE7

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 灵活的高度垂直居中与CSS，超越IE7相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flexible height vertical centering with CSS, beyond IE7</title>

<style>
html,
body {
    width:100%;
    height:100%;
}
html {display:table;}
body {
    display:table-cell;
    vertical-align:middle;
}
#body {
    max-width:50em;
    margin:0 auto;
	border: 1px solid #000;
}
</style>

</head>

<body>
    <div id="body">
        Content goes here
    </div>
</body>

</html>

以上是关于CSS 灵活的高度垂直居中与CSS，超越IE7的主要内容，如果未能解决你的问题，请参考以下文章

CSS水平居中与垂直居中的总结

CSS居中总结

CSS总结——元素的垂直居中（已知高度/未知高度）

CSS垂直居中

CSS标签显示模式 ④ ( 标签显示模式示例 | 设置行内元素宽高 | 设置鼠标经过样式 | 设置文字水平居中 | 设置文字垂直居中 | 文本行高与盒子高度关系 )

CSS实现垂直居中的7种方法