虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果勉强过关。要让DIV中的内容垂直居中，无非有以下几种方法。
首推Flex弹性布局CSS属性flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。假设有下面的HTML代码：
divid="content"居中显示/div
那么我们可以编写CSS代码：
#content{display:flex;justify-content:center;align-items:center;}
行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p{height:30px;line-height:30px;width:px;overflow:hidden;}
这段代码可以达到让文字在段落中垂直居中的效果。
内边距（padding）法另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中比如：
p{padding:30px;}
这段代码的效果和line-height法差不多。
模拟表格法模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示，用到的CSS属性有display、vertical-align等。先看下面的Html代码：
divid="box"divid="content"居中显示/div/div
参照以上Html代码，让最外面名为box的Div呈表格样式显示，然后再让box中名为content的Div呈单元格显示，并利用vertical-align:middle让其垂直居中，这样就模拟出来和表格一样的显示方式，CSS代码如下：
#wrap{height:px;display:table;}#content{vertical-align:middle;display:table-cell;border:1pxsolid#FF;background:#;width:px;}
但这种方法有一个弊端，由于IE浏览器对高度理解会产生错误，所以这种方法仅对Fifox有效，对IE无效，既然这样，我们就需要找出对IE的修正方法，于是有了另外一种方法。
定位法顾名思义，定位法是利用CSS定位属性position对元素进行定位的方法，也属于模拟方法，不过它对IE的支持还是不错的。它的Html代码为：
divid="box"divid="sub"divid="content"垂直居中/div/div/div
这段代码比上一种方法中多出了一个名为sub的Div，它的作用是用来定位，原理就是：首先让box出于相对定位，sub相对box出于相对定位，位于box垂直方向的50%，再让content中的真正内容出于sub垂直方向的-50%，从而制作出content在box中垂直居中的效果，它们的CSS代码如下：
#wrap{border:1pxsolid#;background:#F00;width:px;height:px;position:lative;}#subwrap{position:absolute;top:50%;}#content{border:1pxsolid#;position:lative;top:-50%;color:#FFF;}
这段代码无论是在IE中还是Fifox中，都能正常居中了