问题描述
我有一个容器,我需要在中间放一个盒子,但我无法获得父级的静态高度,因为它会发生变化。因为我的盒子不能设置在页面的中间。我需要帮助
解决方法
#container {
display : flex;
align-items: center;
justify-content: center;
}
在您的容器盒(父盒)上保留此样式。这会将内部 div 置于中心并在容器高度改变时保持不变。
,使用这个
#container {
display : flex;
align-items: center;
justify-content: center;
}
如果这不起作用 尝试设置要放置在中间的框的特定宽度和高度,并根据父容器大小进行操作。 例如:如果父容器测量 100% 的宽度并且框的宽度为 30% ;然后给一个
margin-left : 35% ;
同样设置高度并给margin-top。 希望这个方法可以帮到你。 抱歉,如果这不起作用。
,.parent {
position:relative;
float: left;
margin: 5px;
width: 180px;
height: 180px;
border:1px solid #DDD;
}
.box {
position: absolute;
background: #1695A3;
color:#FFF;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
}
.box3 {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="parent">
<div class="box box3">3</div>
</div>