<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片居中</title>
<style>
*{
padding:0;
margin:0;
}
/*方法一*/
/* .view{
width: 600px;
height: 600px;
border:1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}*/
/*方法二*/
/* .view{
width: 600px;
height: 600px;
border:1px solid red;
text-align: center;
}
.view img{
vertical-align: middle;
}
.view span{
height: 100%;
width:0;
display: inline-block;
vertical-align: middle;
}*/
/*方法三*/
.view{
width: 600px;
height: 600px;
border:1px solid red;
background: url(images/1.jpg) no-repeat;
background-position: 50% 50%;
}
</style>
</head>
<body>
<!--
图片大小为400*300
方法一:在view中加display:table-cell;vertical-align:middle样式;
方法二:在img标签后加span标签,并给它如上所示的样式，img还须加vertical-align;middle样式;
决定行高的是行内最高的元素的值:span的height:100%;
方法三:背景法,就是让图片当做div背景，然后再调整背景的位置使之在中间位置
-->
<!-- <div class="view">
<img src="images/1.jpg" alt="">
</div>
<div class="view">
<img src="images/1.jpg" alt=""><span></span>
</div> -->
<div class="view">
</div>
</body>
</html><pre name="code" class="html"><!doctype html>
<
阅读背景：
web页面开发过程中让图片垂直居中的三种方法
来源：互联网
分享到：
