下面是我可以构建的最好的全方位解决方案,以使固定宽度, 高度灵活的
内容框垂直和水平居中。它已经过测试,可用于Firefox,Opera,Chrome和Safari的最新版本。
.outer { display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%;}.middle { display: table-cell; vertical-align: middle;}.inner { margin-left: auto; margin-right: auto; width: 400px; }<div > <div > <div > <h1>The Content</h1> <p>once upon a midnight dreary...</p> </div> </div></div>查看带有动态内容的工作示例
我构建了一些动态内容来测试灵活性,并且很想知道是否有人看到它的任何问题。它也应适用于居中的叠加层-灯箱,弹出窗口等。



