居中的 div 比 bootstrap 和 flexbox 上的父 div 高

【问题标题】：Centered div with greater height than parent div on bootstrap and flexbox居中的 div 比 bootstrap 和 flexbox 上的父 div 高
【发布时间】：2020-04-19 11:49:07
【问题描述】：

我正在努力实现这一目标......

青色 div 的右侧应该是文本。

我可以使用绝对位置来做到这一点，但我找不到任何解决方案来使用引导程序和弹性盒来做到这一点。使用引导程序和“行”和“列”方式，灰色 div 的高度总是等于蓝绿色 div 的高度，但我不会那样做。

任何想法，我该怎么做？

非常感谢大家

【问题讨论】：

你能分享你的html/css吗？

标签： html flexbox center

【解决方案1】：

如果您不想使用absolute，或relative，或者一般不是static 定位，有一种方法可以使用负边距将一个元素置于另一个元素之上。

.background {
  background-color: #AAA;
  margin: 50px 0 0 0;
  height: 50px;
}

.foreground {
  background-color: blue;
  height: 150px;
  width: 150px;
  margin: -100px 0 0 50px;
}

<div class="background">
</div>
<div class="foreground">
</div>

【讨论】：