设置div中的div居中显示

<div class='big'>
    
    <div class='small'>box1</div>
 
 </div>

style样式：
.big{
  height:200px;
  width:200px;
  border:black solid 1px;
  position:absolute;
  left:150px;
  

}
.small{
  height:100px;
  width:100px;
  background-color:green;
  position:relative;
  left:100px;
  top:100px;
  margin-top:-50px;
  margin-left:-50px;
  border:black solid 1px;
}

div class='big2'>
    
    <div class='small2'>box3</div>
 
 </div>


.big2{
  height:200px;
  width:200px;
  border:black solid 1px;
  text-align:center;

}
.small2{
  height:100px;
  width:100px;
  background-color:green;
  margin:50px auto; //外面的div高度的一半
  border:black solid 1px;
}