小盒子在大盒子里水平垂直居中的几种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*方法一、纯margin + overflow:hidden;*/
/* .boss{
width: 500px;
height: 500px;
background: orange;
overflow: hidden;
}
.box{
width: 200px;
height: 200px;
background: green;
margin-left: 150px;
margin-top: 150px;
} */
/*方法二、纯padding*/
/* .boss{
width: 350px;
height: 350px;
background: orange;
padding-left: 150px;
padding-top: 150px;
}
.box{
width: 200px;
height: 200px;
background: green;
} */
/*方法三、纯定位*/
/* .boss{
width: 500px;
height: 500px;
background: orange;
position: relative;
}
.box{
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 150px;
top: 150px;
} */
/*方法四、display:inline-block + text-align:center + vertical-align: middle*/
/* .boss{
width: 500px;
height: 500px;
background: orange;
text-align: center;
line-height: 500px;
}
.box{
width: 200px;
height: 200px;
background: green;
display: inline-block;
vertical-align: middle;
} */
/*方法五、定位 + margin取负值的方法*/
/* .boss{
width: 500px;
height: 500px;
background: orange;
position: relative;
}
.box{
width: 200px;
height: 200px;
background: green;
position: absolute; */
/* left: 50%; *//*向右移动父元素宽度的一半*/
/* margin-left: -100px; *//*向左移动自身宽度的一半*/
/* top: 50%; *//*向下移动父元素高度的一半*/
/* margin-top: -100px; *//*向上移动自身高度的一半*/
/* } */
/*方法六 定位 + margin:auto;*/
.boss{
width: 500px;
height: 500px;
background: orange;
position: relative;
}
.box{
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<!--
需求：一个宽高为200*200的小盒子在一个宽高500*500大盒子里面做水平垂直居中，请写出你知道的实现方法？(6种)
-->
<div class="boss">
<div class="box"></div>
</div>
</body>
</html>
