css垂直居中:css实现不确定高度垂直居中二种方法

发布时间:2019-11-30编辑:脚本学堂
有关css垂直居中的二例代码,css实现不确定高度垂直居中的两种方法,未知高度的图片如何设置垂直居中效果,不确定高度文字垂直居中的例子,供大家学习参考。

css实现垂直居中的特效代码
 
例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>
<!--[if IE]>
<style type="text/css">?
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<i></i><img src="images/demo_zl.png" alt="" />
</div>
</body>
</html>


css设置div居中(水平居中与垂直居中):