如何使用css让一个已知宽高的盒子垂直水平居中？

Posted 2023-05-16

在黑马程序员学习时候就会有老师教过，知道盒子的自身长度和宽度，其实解决的思路是这样的：首们需要position:absolute;绝对定位。再使用margin负值的方法。负值的大小为此盒子自身宽度高度除以二。 代码如下:
position: absolute;
top: 50%;
left: 50%;
margin-left: -自身盒子宽度/2;
margin-top: -自身盒子高度/2;不知道是否能够帮助到您，有帮助的话，请采纳，谢谢 参考技术A <div style="position:absolute; left:50%; top:50%; width:300px; height:200px; margin-left:-150px; margin-top:-100px;">...</div> 参考技术B 在黑马程序员学习时候就会有老师教过，知道盒子的自身长度和宽度，其实解决的思路是这样的：首们需要position:absolute;绝对定位。再使用margin负值的方法。负值的大小为此盒子自身宽度高度除以二。 代码如下:
position: absolute;
top: 50%;
left: 50%;
margin-left: -自身盒子宽度/2;
margin-top: -自身盒子高度/2;

两种方式实现盒子水平垂直居中

一：在知道宽高的情况下：

<div style="

width:200px;

height:200px;

background: red;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

"></div>

二：在不知道宽高的情况下：padding会把盒子撑开，相当于宽高了。

<div style="

padding: 30px;

background: pink;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%，-50%）；

"></div>

另外：可以加几个兼容：

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);