html 屏幕垂直居中显示,页面内容居中设置（水平居中与垂直居中）

最近做了这些:

我搜集到关于这个主题有很多种方法,但我的理念是条条大道通罗马,但你最好固定一条道走到黑.

不管是在整个页面中居中,还是在BOX里居中,不管是text内容还是图片内容,水平居中都是比较简单的,align基本都可以实现.但是垂直居中,就有点小技巧,有一段代码,百试百灵,几乎任何情况下都可以实现居中.

position:absolute; top:50%; left:50%;

margin-left:-100px; margin-top:-100px;

其中margin-left和margin-top的值为内容的长和宽的一半(例子假设内容的长宽各为200px).

这句的意思是内容的位置为绝对(position:absolute;) 内容位置坐标在环境的中心点(top:50%; left:50%;)

补偿内容的长宽使内容的中心点位置和环境的中心点位置重合(margin-left:-100px;

margin-top:-100px;)

用这段CSS就可以解决无论在多大浏览器分辨率下内容总是垂直居中的问题

1 文字居中

xxxxx

2 图片居中

src="http://portrait1.sinaimg.cn/1258725992/blog/180

" width="180" height="180" style="position:absolute; top:50%;

left:50%; margin-left:-90px;

margin-top:-90px;"/>

当然,这里不讨论说用table可以如何简单实现居中, 在不按w3c标准情况下,即你的页面代码中没有这段声明情况下

/p>

1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

你可以打个长宽都100%的表格,并且把内容都居中,也可以实现这样的效果~~

以上是我个人经验所得,但妈妈说生活是一盒巧克力,虽然我还没有因为这样使用遇其他的问题,也欢迎有遇到BUG的朋友们给我提醒