設置div中的div居中顯示

 

設置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;
}