<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 有一个大的div,宽500,高300.
在大的div中有一个小的div,宽200,高100
现在需要将小的div放在大的div中间位置(水平和上下都居中),
并且两个盒子的宽高都不能改变.
*/
/*方法一:
.father{
width:200px;
height: 100px;
border: 1px solid red;
padding: 100px 150px;
}
.son{
width:200px;
height: 100px;
border: 1px solid blue;
} */
/*方法二:*/
.father{
width:350px;
height: 200px;
border: 1px solid red;
padding-top: 100px;
padding-left: 150px;
}
.son{
width:200px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>