让一个小的div在大的div中居中显示

原文

实现原理是设置margin自动适应,然后设置定位的上下左右都为0。

就如四边均衡受力从而实现盒子的居中：

代码：

.parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}

扩展资料

div+css绝对定位

使用通常是父级定义position:relative定位

子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。

.divcss5{position:relative} 定义，通常最好再定义CSS宽度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px，距离父级上边距离为10px
参考资料

百度百科-div css

 

转载于:https://www.cnblogs.com/xiaoshen666/p/10748155.html