div水平垂直居中显示

本文格式为Word版，下载可任意编辑——div水平垂直居中显示p水平垂直居中显示

经过今天一翻提升，终究找出了解决DIV垂直居中的手段。就跟随我一起去了解下吧，想了解更多相关信息请持续关注我们我!

一：表格布局法

这个方法把一些p的显示方式设置为表格，因此我们可以使用表格的vertical-align属性。

Contentgoeshere

#wrapperdisplay:table;#celldisplay:table-cell;vertical-align:middle;

优点：

content可以动态变更高度不需在CSS中定义。当wrapper里没有足够空间时，content不会被截断

缺点：

InternetExplorer甚至IE8beta中无效，大量嵌套标签其实没那么糟糕，另一个专题

二：假借图片法

这个方法把一些p的显示方式设置为inline-block，和图片一样，因此我们可以使用图片的vertical-align属性。

Contentgoeshere

#wrapperdisplay:table;#likeImgdisplay:inline-block;vertical-align:center;

优点：

在各种欣赏器中兼容性都分外好，ie6和7中有间距问题

缺点：

很轻易影响其他的布局，导致网页布局全部瘫痪

方法三：十足定位法

这个方法使用十足定位的p，把它的'top设置为50%，topmargin设置为负的content高度。这意味着对象务必在CSS中指定固定的高度。

由于有固定高度，或许你想给content指定overflow:auto，这样假设content太多的话，就会展现滚动条，以免content溢出。

Contentgoeshere

#contentposition:absolute;top:50%;height:240px;margin-top:-120px;/*盒子本身高度的一半*/

优点：

适用于全体欣赏器

不需要嵌套标签

缺点：

没有足够空间时，content会消散类似p在body内，当用户缩小欣赏器窗口，滚动条不展现的处境

方法四

这种方法，在content元素外插入一个p。设置此pheight:50%;margin-bottom:-contentheight;

content除掉浮动，并显示在中间。

Contenthere

#floaterfloat:left;height:50%;margin-bottom:-120px;#contentclear:both;height:240px;position:relative;

优点：

适用于全体欣赏器

没有足够空间时例如：窗口缩小content不会被截断，滚动条展现

缺点：

唯一我能想到的就是需要额外的空元素了，可能对于某些强迫症患者来说是不容许的这个方法的应用理应也很广

方法五

这个方法使用了一个position:absolute，有固定宽度和高度的p。这个p被设置为top:0;bottom:0;。但是由于它有固定高度，其实并不能和上下都间距为0，因此margin:auto;会使它居中。使用margin:auto;使块级元素垂直居中是很简朴的。

Contenthere

#contentposition:absolute;top:0;bottom:0;left:0;right:0;margin:auto;height:240px;width:70%;

优点：

简朴粗暴,代码简朴,其实设计者开初也