Question

我想将元素的中心（无论其高度如何）放在其父元素的底部。我以为我会选择绝对但没有任何意义。见下图：

<div id="red">
    <div id="blue"></div>
</div>

我怎么能得到这个结果？

编辑：感谢@Gaby又名G. Petrioli，我找到了解决方案：

#red{
  width: 300px;
  height: 200px;
  background: red;
  position:relative;
}
#blue{
  width: 100px;
  height: 50px;
  background: blue;
  right:3%;
  
  /* here is the magic solution*/
  position:absolute;
  bottom: 0;
  transform: translateY(50%);
}

<div id="red">
        <div id="blue"></div>
    </div>

Answer 1

您应该使用绝对位置将其放置在底部，然后使用变换平移将其向上移动50％，因为该工作与其自身的高度相关。

所以

.red{position:relative}
.blue{
   position:absolute;
   top:100%;
   right:50px;
   transform:translateY(-50%);
}

Answer 2

您可以使用 CSS定位，例如：

.red {
  position: relative;
}

.blue {
  position: absolute;
  top: 100%; // Will be at exact bottom
  left: 50%;
  transform: translate(-50%, -50%); // Will pull 50% (of blue) upwards & 50% from the right as well
}

.red {
  background: red;
  width: 200px;
  height: 300px;
  position: relative;
}

.blue {
  background: blue;
  width: 100px;
  height: 200px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="red">
  <div class="blue"></div>
</div>

希望这有帮助！

Answer 3

transform translate()将根据容器本身的大小计算％。

初始值无

适用于可转换元素

继承否

百分比 refer to the size of bounding box

媒体视觉

计算值指定，但相对长度转换为绝对长度

动画类型转换

规范顺序由形式语法定义的唯一非模糊顺序

创建堆叠上下文是

在演示文稿下方，一旦框与底部对齐并居中，就会显示它。

.red {
  display: table-cell;
  vertical-align: bottom;
  width: 150px;
  height: 150px;
  background:/* see center*/
  linear-gradient(to left,transparent 50%, rgba(0,0,0,0.2) 50%),
  linear-gradient(to top,transparent 50%, rgba(0,0,0,0.2) 50%) 
  crimson;
  }

.blue {
  width: 40%;
  min-height:3em;
  margin: auto;
  background: rgb(0, 119, 204);
                transform: translate(50%, 50%); /* what you look for */
}
body {
display:table;
border-spacing:1em;

<div class="red">
  <div class="blue">.<br/>.<br/>.<br/>
  </div>
</div>

<div class="red">
  <div class="blue"> 
  </div>
</div>

<div class="red">
  <div class="blue"><br/><br/><br/><br/><br/><br/><br/><br/>
  </div>
</div>

official和to learn further

Answer 4

#red{
  position: relative;
  width: 200px;
  height: 300px;
  background: red;
  
}

#blue{
  position: absolute;
  width: 100px;
  height: 120px;
  background: blue;
  top: calc(100% - 50px);
  /* 100% - it's width/2 */
}

<div id="red">
    <div id="blue"></div>
</div>

如果#blue的{{1}}是width，200px。

如果top: calc(100% - 100px)的{{1}}是#blue，width。

CSS - 根据宽度

4 个答案: