Css 垂直对齐div到未知高度div，而不影响水平居中

在上图中，有一个100%宽度和未知高度的红色div。高度由橙色div的高度加上一些填充控制

橙色分区的高度和宽度由动态文本内容控制，我们事先不知道动态文本内容，但橙色分区应水平居中于红色分区内，两侧宽度相等

蓝色div的宽度和高度是固定的（比如说50px 50px，比橙色div小），放在左手边。它有时可见，有时不可见（由javascript控制-可见性或显示，以最有效的为准），但在任何情况下都不应影响橙色分区的水平居中。但是，蓝色分区的垂直中心应垂直对齐，以匹配橙色分区的垂直中心

我可以添加额外的div，或者将内容更改为跨距，诸如此类，但目前我尝试的任何操作都意味着橙色div的水平居中流考虑了蓝色div，而我需要蓝色div完全从流中去掉

---

有什么想法吗？

您应该使用

display:flex

和

align items

，将最小高度传递给容器也很重要

我很快就编了一把小提琴来解释我对你的理解

看看这个（）：

.container{
宽度：300px；
垫底：20px；
填充顶部：20px；
边框：实心1px红色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
最小高度：30px；
}
.内部{
背景：rgba（0,0,0,0.5）；
宽度：50%；
}
.固定{
位置：固定；
左：20px；
边框：纯色1px蓝色；
高度：30px；
}

益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智
固定的

您应该使用

display:flex

和

align items

，将最小高度传递给容器也很重要

我很快就编了一把小提琴来解释我对你的理解

看看这个（）：

.container{
宽度：300px；
垫底：20px；
填充顶部：20px；
边框：实心1px红色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
最小高度：30px；
}
.内部{
背景：rgba（0,0,0,0.5）；
宽度：50%；
}
.固定{
位置：固定；
左：20px；
边框：纯色1px蓝色；
高度：30px；
}

益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智
固定的

绝对定位蓝色div，并使用

变换

将其居中。您需要在两个彩色div周围添加一个容器

.red{
边框：2倍纯红；
宽度：100%；
}
.集装箱{
位置：相对位置；
}
蓝先生{
背景颜色：蓝色；
边框：2倍实心深蓝色；
宽度：70px；
高度：70像素；
位置：绝对位置；
左：40px；
最高：50%；
转换：翻译（0，-50%）；
}
黄先生{
背景颜色：黄色；
边框：2件实心黄花；
利润率：10px自动50px；
宽度：120px；
高度：200px；/*更换我*/
}

---

绝对定位蓝色div，并使用

变换

将其居中。您需要在两个彩色div周围添加一个容器

.red{
边框：2倍纯红；
宽度：100%；
}
.集装箱{
位置：相对位置；
}
蓝先生{
背景颜色：蓝色；
边框：2倍实心深蓝色；
宽度：70px；
高度：70像素；
位置：绝对位置；
左：40px；
最高：50%；
转换：翻译（0，-50%）；
}
黄先生{
背景颜色：黄色；
边框：2件实心黄花；
利润率：10px自动50px；
宽度：120px；
高度：200px；/*更换我*/
}

Fixed element与Chrome上的窗口一起滚动。Fixed element与Chrome上的窗口一起滚动。