有没有办法在css中设置乘法边距?

问题描述

我有一个容器,我需要在中间放一个盒子,但我无法获得父级的静态高度,因为它会发生变化。因为我的盒子不能设置在页面的中间。我需要帮助

解决方法

#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>