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

 

posted on
2016-10-13 13:12 
路修远而求索 
阅读(65110) 
评论(0) 
编辑 
收藏 
举报

版权声明：本文为keyi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/keyi/p/5956115.html