嵌套的定位盒子如何居中?
<div class="father"> <div class="son"></div> </div>
<style> .father { width: 300px; height: 300px; border: 1px solid #000; position: relative; } .son { width: 100px; height: 100px; background: rgb(133, 57, 57); margin: 0 auto;/* 没有效果 */ </style>
问题:加了定位和浮动的盒子,子盒子用margin:0 auto;会失效
解决办法:
1.让子盒子水平居中:第一步子盒子先向左移动父盒子宽度的一半,第二步子盒子向右移动自身宽度的一半。
2.让子盒子垂直居中:第一步子盒子先向下移动父盒子高度的一半,子盒子向上移动自身高度的一半。
.son { width: 100px; height: 100px; background: rgb(133, 57, 57); margin: 0 auto;/* 没有效果 */ position: absolute; /* 让子盒子水平居中 */ left: 50% ;/* 子盒子先向左移动父盒子宽度的一半 */ margin-left: -50px;/* 子盒子向右移动自身宽度的一半 */ /* 让子盒子垂直居中 */ top: 50%;/* 子盒子先向下移动父盒子高度的一半 */ margin-top: -50px;/* 子盒子向上移动自身高度的一半 */ }
【转载文章务必保留出处和署名,谢谢!】