一、针对图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div { width: 1000px;height: 700px ;background: #dedede;}
</style>
</head>
<body>
<div>
<img src="http://dummyimage.com/800x600/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
</div>
</body>
</html>
方法一:已知div高度和img高度,主要控制div的padding-top
div {
width: 1000px;
height: 700px;
background: #dedede;
padding-top: 100px; //padding-top必须设置为div.height()-img.height()
}
img {
display: block;
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
padding-top: 50px; //(div.height()-img.height()/2
}
方法三:text-align结合padding
img {
padding-top: 50px;
}
<pre name="code" class="html">div {
position:relative;
width: 1000px;
height: 700px;
background: #dedede;
}
方法四:绝对定位结合left和top
img {
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px; //img.width()/2
margin-top: -300px; //img.height()/2
}
div {
width: 1000px;
height: 700px;
background: #dedede;
position:relative
}