中心元素直到遇到障碍物

Question

容器内有两个元素 - 一个(蓝色)需要保持在左侧,另一个(绿色)相对于外部红色居中.但是,如果屏幕足够小,则居中的容器(绿色)不能与左侧的容器(蓝色)重叠,它应始终保持在蓝色的右侧.有什么想法可以实现吗？如果不是用css,那么可能是用js？

大屏幕

小屏幕

到目前为止我得到了:

小提琴

<div class="red">   
    <div class="blue">
        texttexttexttext
    </div>
    <div class="centered">
        Centered Container of fixed width
    </div>    
</div>

.red {
    height: 100px;
    text-align: center;
    border: 3px solid red;
    position: relative;
}
.blue {
    background: blue;
    height: 100%;
    float: left;

}
.centered {
    display: inline-block;
    border: 1px solid green;
    position: absolute;
    left: calc(50% - 70px);
    width: 140px;
    top: 0;
}

这使绿色容器居中,但它在较小的屏幕上与蓝色重叠.

编辑:添加了一些中心标记,以便轻松查看中心

Answer 1

看起来这可以在页面标题中使用，项目位于侧面，标题位于中间。因此，我采取了一种非常不同且更简单的方法。当宽度不多时，视口居中看起来不太好。使用媒体查询在居中模式之间切换。小提琴演示

#main {
    position: relative;
    overflow: hidden;
    text-align: center;
}
#center {
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 500px) {
    #center {
        position: static;
        transform: none;
    }
}