虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。好比表格布局中的垂直居中就是Div布局的一大弱项，不过好在变幻无穷的CSS能够灵活运用，能够制做出准垂直居中效果，勉强过关。 要让div中的内容垂直居中，无非有如下几种方法，等我一一列举：java
1、行高（line-height）法浏览器
若是要垂直居中的只有一行或几个文字，那它的制做最为简单，只要让文字的行高和容器的高度相同便可，好比：布局
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
这段代码能够达到让文字在段落中垂直居中的效果。spa
2、内边距（padding）法code
另外一种方法和行高法很类似，它一样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，好比：it
p { padding:30px; }
这段代码的效果和line-height法差很少。io
3、模拟表格法table
模拟表格法其实就是用CSS中对元素的声明让块元素像表格同样显示，用到的CSS属性有display、vertical-align等。 先看下面的Html代码：class
<div id="box"> <div id="content">居中显示</div> </div>
参照以上Html代码，让最外面名为box的Div呈表格样式显示，而后再让box中名为content的Div呈单元格显示，并利用vertical-align:middle让其垂直居中，这样就模拟出来和表格同样的显示方式，CSS代码以下：容器
#wrap { height:400px; display:table; } #content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background:#000; width:400px; }
但这种方法有一个弊端，因为IE浏览器对高度理解会产生错误，因此这种方法仅对Firefox有效，对IE无效，既然这样，咱们就须要找出对IE的修正方法，因而有了另一种方法。
4、定位法
顾名思义，定位法是利用CSS定位属性position对元素进行定位的方法，也属于模拟方法，不过它对IE的支持仍是不错的。 它的Html代码为：
<div id="box"> <div id="sub"> <div id="content">垂直居中</div> </div> </div>
这段代码比上一种方法中多出了一个名为sub的Div，它的做用是用来定位，原理就是：首先让box出于相对定位，sub相对box出于相对定位，位于box垂直方向的50%，再让content中的真正内容出于sub垂直方向的-50%，从而制做出content在box中垂直居中的效果，它们的CSS代码以下：
#wrap { border:1px solid #000; background:#F00; width:400px; height:400px; position:relative; } #subwrap { position:absolute; top:50%; } #content { border:1px solid #000; position:relative; top:-50%; color:#FFF; }
这段代码不管是在IE中仍是Firefox中，都能正常居中了