在我们能够把 content 垂直居中之前, body 和 html 应该被拉伸到 100% 的高度。由于 height 在 padding 和 margin 之内,所以我们要把它们设成 0 以防止因为很小的 margin 出现滚动条。
floater 的 margin-bottom 是 content 高度(400px)的一半, -200px。
现在可以看到一下效果: centred 的宽度为 80%。这可以市网页随着显示器的大小而变化。
一般称作流体布局。设置 min-width 和 max-width 以避免网页过大或者过小。 但是 IE 不支持 min/max-width。
显然可以用固定宽度来代替。 因为 #centred 是相对定位的,在它里面我们可以用绝对定位来定位元素。
设置 #content 的 overflow:auto; 以避免滚动条的出现。IE 不怎么喜欢 overflow:auto; 除非我们指定高度(不是 top 和 bottom 的定位,也不是 %) 因此我们给它指定高度。
步骤三:
最后要做的就是再添加点样式,让页面好看点。从目录开始吧。
需要注意的是 #centred 的圆角。 CSS3 中,应该有 border-radius 属性来设定圆角的半径(可参考 CSS3之旅: border-radius(圆角))。
现在的 流行的浏览器都还不支持,除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前缀. 兼容性注意事项 如你所想,IE 是唯一添麻烦的浏览器。
floater 必须指定宽度,否则在任意版本 IE 中,它都啥也不干
IE 6 中目录被周围太多的空间打断 IE 8 有多余空间(作者遗漏) 更多的想法 利用居中的网页可以做很多有意思的事情。
我在重新设计 SWFObject Generator 2.0 (使用SWFObject2.0 生成代码)使用了这个想法。这里有另外的一个想法。
资料 以下是我参考的一些资料,推荐阅读。
Understanding vertical-align,or “How (Not) To Vertically Center Content”
Vertical centering using CSS
Vertical Centering in CSS
糖伴西红柿说:
水平居中经常用,其实垂直居中也很有用的。平时用的最多的应该是方法五了,算是个小技巧吧。
第六种方法:
上次js做轮播全屏的时候,由于ie火狐和chorme的样式不一样,就发现了一个新的居中方式。
使用 translate,而不用margin取负值了,垂直居中的元素也就不需要固定的宽高了。
.inner{ position : absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}