html,body{height:100%}*{margin:0;padding:0}#content{border:1px solid #666;padding:10px}#content_container{display:table-cell;padding:10px;vertical-align:middle}#page{display:table;height:100%;margin:0 auto;overflow:hidden;width:465px}:first-child+html #page,* html #page{position:relative}:first-child+html #content_container,* html #content_container{position:absolute;top:50%}:first-child+html #content,* html #content{position:relative;top:-50%}
嗨,伙计,它正在工作
非常好的脚本。恭喜!
因为 Twitter 在中国被屏蔽了。
所以这段代码加载时间很长。
http://platform.twitter.com/widgets.js
可以优化外部 JavaScript 作为动态加载吗?
太棒了……
非常有用的傻瓜!
你是说工具,对吧?
失败。你甚至无法复制页面上的内容来尝试它。
好东西。……我喜欢新的网站徽标和字体。;
太棒了!!它适用于 IE7、IE8、FF 3.5
谢谢。
请原谅我的无知,但是为什么 CSS 有两个相同的 id 选择器?第二行有 #page{…},最后一行也有(尽管影响不同)。
为什么不将它们合并?还是由于我无法理解的原因?
同样的问题,但我猜这仅仅是为了代码组织。但我真的很想知道是否有特定的原因这样做。
这效果非常好,感谢分享。当不得不考虑 IE 兼容性时,我仍然会感到恶心,但这就是生活。
@Brian,我尝试将 2 个 #page 选择器的 CSS 合并,但在 Firefox 中渲染没有变化。我推测有一个非常特殊的原因导致它被分开了(也许是在更大的设计中使用它的某种预见性?),但是对于这个基本的示例,似乎没有关系。
—— Jesse
PS,在发布此消息时,我的作品集网站还很粗糙;请不要评判。
效果非常好。非常感谢这个 CSS 技巧和提供的其他所有代码片段……
太棒了!谢谢!
是啊!伙计……它正在工作:D非常感谢你,兄弟:D
在现有的网站上第一次运行成功,非常高兴!!一直想知道如何做到这一点。
我不知道这段代码的作用或它的含义。对我来说没什么用。
谢谢.. 简单易懂
谢谢 Chris,不可思议的 CSS!
你真的没有使用“*”选择器来重置这些边距和填充,是吗?是的,你用了。
如果你将来打算在这些标签之间添加内容,这并不是我所说的“好主意”。毕竟“*”的意思是“所有”。
天哪,这来自我想象中比向新手和极客的公众传播这样的东西更聪明的人。啧啧……
是的,我今天是个愤世嫉俗者和批评家!;
我很喜欢那个重置。它简单,易用,涵盖了很多方面。
它不起作用
它在 IE 9 中不起作用
你在说什么?它在 IE9 中运行良好。你可能有一些过于激进的 IE9 安全设置。
伙计,请你再检查一下代码..它不起作用。
CSS:复制/粘贴并应用源代码格式(或保持原样……)
HTML
使用本文顶部提供的代码
__ – __
无需 JavaScript 即可水平和垂直居中元素!纯 CSS 技术允许具有动态高度的元素水平和垂直居中对齐。已在以下版本中测试:Win:ie6、ie7、ie8、Chrome 2、Firefox 2;Mac:Safari 3、Safari 4(测试版)、Firefox 3、Opera 9;未解决的问题:IE6 和 IE7 - 如果内容大于浏览器窗口,则滚动条会出现一些问题……来源:一些好人由一些好人快速翻译,作为此地作者,喜欢帮助.. 被帮助 - 由好人。
__ – __
这确实非常有效……
更正最后一段的格式
无需 JavaScript 即可水平和垂直居中元素!
纯 CSS 技术允许具有动态高度的元素水平和垂直居中对齐。
已在以下版本中测试:Win – ie6、ie7、ie8、Chrome 2、Firefox 2;Mac – Safari 3、Safari 4(测试版)、Firefox 3、Opera 9。
未解决的问题:IE6 和 IE7 - 如果内容大于浏览器窗口,则滚动条会出现一些问题……
来源:一些好人 http://www.flashjunior.ch/school/test/divcentering/index.cfm 。
由一些好人快速翻译,作为此地作者,喜欢帮助.. 被帮助 - 由好人。
效果很好!但是如果 page div 的宽度为 100%,则不起作用,这正是我想要的。
嗨。!!它在 IE-6 上不起作用。如果我们增加内容,则不会出现垂直滚动条。
嗨,朋友,更正它,它不起作用
节省了我一些时间,重新修改了一个网站,该网站的 CSS 类用于根据内容定位内容,这造成了维护噩梦。
谢谢 Chris。
节省了我一些时间,重新修改了一个网站,该网站的 CSS 类用于根据内容定位内容,这造成了维护噩梦。
谢谢 Chris。
(如果您愿意,可以在审核时删除我的第一个评论和这一行。我意外地将我的网址设为 HTTPS,但实际上它不是,因此链接无法正常工作。)
谢谢,我正在使用此代码的修改版本来使我的内容居中。它在 FF 上运行良好。我删除了超过 10 行的 JavaScript 代码。
我发现获取客户端视口的的高度是一个更简洁的选择。
这是一个不使用 IE 技巧的解决方案:https://css-tricks.org.cn/centering-in-the-unknown/