<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin: 0px;padding: 0px}
html,body{
width: 100%;
height: 100%;
background-color: #999;
position: relative;
}
/*第一种*/
.div1{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
/*第一种*/
.imgDiv{
width: 800px;
height: 600px;
border: 1px dashed #ccc;
text-align: center;}
.imgDiv p{
width:800px;
height:600px;
line-height:600px; /* 行高等于高度 */
}
.imgDiv p img{
*margin-top:expression((800 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
</style>
<body>
<!--第一种-->
<div class="div1">
<img src="bg.gif" alt="" />
</div>
<!--第二种-->
<div class="imgDiv">
<p>
<img src="bg.gif" alt="" />
</p>
</div>
</body>
</html>css 图片居中_css书写图片居中对齐2种方式
最新推荐文章于 2024-02-04 09:44:50 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
