看网上有很多关于通过css实现垂直居中的方法,今天一起整理说说.方便以后自己需要的时候不用再重新写,直接拷贝过来就可以用了.先来看看效果吧!   效果一    效果二

效果一 是垂直居中对象已知高度,适合浏览器上仅一个重心元素显示时使用,例如登录页面.
实现原理为body设为100%高度,垂直对象使用position:absolute绝对定位,同时使用top:50%和负margin.其中负margin的设定数值为垂直对象自身height的一半.例如height:200px的情况下,负margin就是margin-top:-100px.

效果二 是垂直居中对象未知高度,其中有Block middle,Taobao middle,Table middle和Span middle这四种方法.适合在父级元素实现子元素未知高度垂直居中的情况下使用,包括块级元素和图片和文字都可以实现垂直居中.

Block middle
可以说是目前网上实现垂直居中最好的的方法了,实现关键方法是position.同时支持块级元素和图片和文字,缺点可能就是需要多嵌套2个div.

Taobao middle
从名字就可以看出和淘宝有些些关系,因为这种垂直居中概念首次是出现在2007淘宝UED招聘题解中的,当然这也都是针对IE的方法.通过设定父级font-size实现内部图片的垂直居中,当然父级的img还需要设定为vertical-align:middle.适合用于图片垂直居中,优点是无多余无用的代码.
计算公式: font-size = height÷1.14

Table middle
这种方法相信地球人都知道了,呵呵.适合图片和文字的垂直居中,缺点当然就是那一大堆无用的table沉郁代码.

Span middle
第一次看到源代码的时候,有点被雷到的感觉.实现关键方法是display:inline-block和vertical-align:middle.通过将父级元素下的span设定为display:inline-block,同时给span和同级下的img设定vertical-align:middle来实现垂直居中.这里要说一下display:inline-block,说通俗点就是可以给行级元素设定高度.