麻烦老师解答，谢谢
来源：3-3 绝对定位（1）
dww1
2021-07-06 00:45:29
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 300px;
border: 1px solid #000;
margin: 40px auto;
position: relative;
}
p{
width: 80px;
height: 80px;
background-color:orange;
position: absolute;
top:50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
这个垂直居中相当于 就是div盒子的内容宽度300px减去水平居中上下的80px--得到的220px。而左右方向的垂直居中也是同理 ，而top:50%; 是否也可以根据子元素的宽高 来和父盒子进行加减 得到准确的数值，而不是只是50%？
如果存在多个父盒子时，垂直居中是否可以从外到内 进行居中，就是以离自己最近的盒子作为基准进行垂直居中？
1回答
-
好帮手慕慕子
2021-07-06
同学你好，对于你的问题解答如下：
1、下图划线部分，对于代码中元素居中的理解有误
p元素之所至能够水平垂直居中，是因为设置了绝对定位（参考设置了position:relative;属性的div进行定位），之后设置的left:50%;让p元素的左侧移到中心位置，最后设置负的margin-left，让盒子向左移动自身宽度一半的距离，实现p元素的水平居中效果，垂直方向也是同理。老师简单画了一个图，可以结合下图理解：
2、下图所示的问题， 不可以根据父盒子宽高来计算，需要根据要实现水平垂直居中的元素的自身宽高来计算得到准确的margin-left和margin-top属性值。具体可以参考第一条回答的中解析
3、如果存在多个父盒子时，默认是不可以从外到内进行居中的，而是，以离自己最近的，设置了定位属性（static除外）的盒子为基准，进行垂直居中
祝学习愉快~
0
相似问题