css样式中实现内容垂直居中vertical-align: middle属性，但是一般情况下是没有效果的，下面为大家讲解一下具体的解决方法。对于html中div标签水平居中很容易，设置css样式text-align:center即可，但是垂直居中vertical-align:middle此属性普通设置是无效的。
方式一：在html中div标签增加table表格，html代码如下：
<html>
<style>
#yoodb {
background: #333;
width: 600px;
height: 600px;
overflow: hidden;
text-align: center;
}
</style>
<body>
<div id="yoodb">
<table width="100%" height="100%">
<tr>
<td align="center">
<img src="http://www.yoodb.com/front/images/logo.png" />
</td>
</tr>
</table>
</div>
</body>
</html>方式二：图片居中通过空白图片实现垂直居中效果，html代码如下：
<html>
<title>欢迎收藏本站</title>
<style>
#yoodb * {
margin: 0px;
padding: 0px;
vertical-align: middle;
}
#yoodb {
background: #fff000;
width: 500px;
height: 500px;
text-align: center;
}
#img {
width: 0px;
height: 100%;
}
</style>
<body>
<div id="yoodb">
<img alt="" src="" id="img">
<!--要居中的图片 -->
<img alt="" src="http://www.yoodb.com/front/images/logo.png">
</div>
</body>
</html>注意：上述两种方式不会出现浏览器不兼容等问题，建议使用css样式overflow:hidden属性，当图片超出可视化时隐藏超出部分。
