<!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;