设置div元素中的div元素居中显示

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

  

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

  

posted @ 2020-07-01 12:06  诸城布拉德皮特  阅读(1077)  评论(0编辑  收藏  举报