css中不确定高度垂直居中2种方法

2024-07-11 09:00:47

字体：大中小

来源：转载

供稿：网友

　　例子1

　　不确定高度垂直居中

代码如下
/* center < / .vetically { vertical-align: middle; display: table-cell; position: relative; } .vetically_C { display: block; margin: 0 auto; text-align: center; position: absolute; top: 50%; left: 50%; margin-top: expression(-(this.height ) / 2); margin-left: expression(-(this.width ) / 2); } / center > */

　　例子2

　　标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法2 - 未知高度的图片垂直居中</title>
<style type="text/css">
body {
height:100%;
}
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>

</head>
<body>
<div id="box">
<i></i><img src="images/demo_zl.png" alt="" />
</div>
</body>
</html>