<html>
<head>
<style>
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:#333;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;left: 0}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; margin: 0 auto;}
#content{width:500px; height:400px; border:1px solid red; background:#EEE; margin: 0 auto;}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<div id="content">111</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
DIV+CSS 图片垂直居中效果
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
NULL 博文链接：https://zhouyao.iteye.com/blog/417432
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
div框水平垂直居中跟内容垂直居中
主要为大家详细介绍了CSS教程之div垂直居中的多种方法，还包括多行文本垂直居中的方法，感兴趣的小伙伴们可以参考一下
NULL 博文链接：https://javapub.iteye.com/blog/709361
针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。
css图片垂直居中,分IE，与非IE进行，很详细的
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
带DOCTYPE的写法。。 ------------------ CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ...附送一个 DIV垂直居中的页面~~~
经过今天一翻改进，终于找出了解决DIV垂直居中的办法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
div中多行文字垂直居中
NULL 博文链接：https://highfly-s.iteye.com/blog/1878910
在DIV中图片垂直/水平居中(最简单方法)
DIV内多行文字垂直居中，并且超过固定行数时显示省略号
主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
主要介绍了CSS在固定宽高的div内实现垂直居中的实例详解,即在div内部元素相对于div垂直居中的方法,需要的朋友可以参考下