搜索
您的当前位置：首页 > web资讯 > CSS > 解决子盒子在父盒子中左右居中，垂直居中的问题
所属分类: CSS 2018-08-31 14:57:05 编辑：starDreamFlower 浏览次数 820 次
子盒子width和height确定
<div class='parent'> <div class='child'></div> </div>
// padding实现 .parent { width: 300px; height: 500px; padding-left: 100px; //（父盒子的width - 子盒子的width）/ 2 padding-top: 175px; //（父盒子的height - 子盒子的height）/ 2 } .child { width: 100px; height: 150px; } // margin实现 .parent { width: 300px; height: 500px; position: relative; } .child { width: 100px; height: 150px; position: absolute; left: 50%; top: 50%; margin-left: -50px; // -(子盒子的width / 2) margin-top: -75px; // -(子盒子的height / 2) }
子盒子width和height不确定
// margin translate实现 .parent { width: 300px; height: 500px; position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
