DIV中一般都是宽度居中,现在要展示一个图片,在DIV中需要高度居中,不想用表格,只用css设置,试了很多办法,终于今天用css将DIV高度居中了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="图片在DIV中垂直水平都居中" />
<meta name="keywords" content="图片在DIV中垂直水平都居中" />
<meta name="author" content="liu" />
<title>图片在DIV中垂直水平都居中</title>
<style>
.middle-out{height:385px;display: table-cell;vertical-align:middle;border:1px solid #f00;}
</style>
</head>
<body>
<div class="middle-out">
<img src="http://s2.sinaimg.cn/middle/4990aec6h9669862fd7e1&690" />
</div>
</body>
</html>
重点是这里:
display: table-cell;
vertical-align:middle;
这两个属性的设置是关键