CSS图片垂直居中的一些方法分享，除了背景图法以外，使用display:inline-block方法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display:inline-block方法实现图片垂直居中</title>
<style type="text/css">
div {
display: table-cell;
height: 300px;
width: 500px;
text-align: center;
border: 1px solid #000;
vertical-align: middle;
}
</style>
<!--[if IE]>
<style type="text/css">
i {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
vertical-align: middle;
}
</style>
<![endif]-->
</head>
<body>
<div>
<i></i>
<img src="http://www.baidu.com/img/logo.gif" alt="logo" />
</div>
</body>
</html>
以上代码可以简单有效的实现图片垂直方向居中哦。
时间： 2025-01-20 04:12:07