html中盒⼦上下左右居中⽅法汇总
在页⾯开发中，常见的盒⼦上下左右居中⽅法
⼀.已知盒⼦的宽度和⾼度，需要在⽗盒⼦中上下左右居中
1.
html
<div class="box">
<div class="child"></div>
</div>
css
.box{width: 300px;height: 300px;border: 1px solid orange;position: relative;}
.child{width: 100px;height: 100px;border: 1px solid blue;position:absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;} 2.
html
<div class="box">
<div class="child"></div>
</div>
css
.box{width: 300px;height: 300px;border: 1px solid red;position: relative;}
.child{width: 100px;height: 100px;border: 1px solid green;position:absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}
⼆.未知宽度盒⼦上下左右居中
1.
html
div中的div居中
<div class="box">
<div class="child">我是⼦盒⼦</div>
</div>
css
.box{width: 300px;height: 300px;border: 1px solid red;position: relative;}
.child{width:auto;border: 1px solid green;position:absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。