<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father{
width:500px;
height:500px;
position:relative;
background-color: aquamarine;
}
.son{
width:100px;
height:100px;
position: absolute;
background-color: antiquewhite;
top:0;
left:0;
right:0;
bottom: 0;
margin:auto;
text-align: center;
font-size: 3em;
font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
}
img{
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
<img src="m1.png" width="100" height="100">
</div>
</body>
</html>
说明:
1,上图图片水平居中,关键要设置
margin:0 auto; //自动填充
display:block;//因为img是行内元素,不占据空间,所以强制设置为块级元素
2.son 垂直水平都居中,关键需要设置:
father设置
position:relative;//相对定位
son设置:
position:absolute;
margin:auto;