1、第一种css代码如图所示。display设置成table-cell，text-align为center，垂直居中设置vertical-align为middle。
2、打开浏览器查看结果，图片已处于正中状态。
3、第二种方法css代码如图。div设置成相对定位，img设置成绝对定位，然后left:50%，top:50%，此时图片的左上角将位于div的中心。重点：图片向上移动图片高度的一半，并向左移动图片宽度的一半。正好为与div正中间。
4、在浏览器查看结果，图片水平，垂直均居中。
1、在html编辑器中，新建一个html文件，例如：index.html。
2、在index.html中的body标签中，填入html代码：
<div style="position: absolutetop: 50%left: 50%height: 10%width: 30%margin: -5% 0 0 -15%">123asfafada</div>
3、最后，浏览器运行index.html，此时html中的文字被成功垂直水平居中显示。
单行文字（即文字较少，不够一行）重直居中比较好解决，使用行高和高度相等即可。如：.abc{height:100pxline-height:100px}多行文本垂直居中分两种情况
1、div高度不固定，使用padding属性，将上下空相等的间距即可，如：.abc{height:autopadding:20px 10px/*上下各空20px,左右空10px*/}
2、div固定高度文字重直居中（这种情况比较常见，稍微复杂些），思路，将div转化表格属性，因为表格是可以实现垂直居中的。需要多添加一个div层,具体如下：
样式代码：
.waiceng{
height:400px
display:table
}
.liceng{
vertical-align:middle
display:table-cell
border:1px solid #FF0099
background-color:#FFCCFF
width:760px
}
源代码：
<div class="waiceng">
<div class="liceng">现在我们要使这段文字垂直居中显示</div>
</div>
声明：上面的代码IE6不支持。不过现在没几个人用IE6了，可以忽略了
