设置div中的div居中显示

一世执手 提交于 2020-01-10 20:10:39

 

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!