html - 水平居中具有绝对位置的元素

Question

我搜索过类似的问题，但不幸的是 left:50% soultion 在这里不起作用。

我有一个带有相对位置的容器 (.leftLanding)，在其中我有一个带有绝对位置 (.imageCenter) 的 div，我想将其水平居中。添加 left: 50% 实际上并没有使它居中但是因为容器有 85% 我也尝试了 42.5% 但这也没有用。

我删除了所有不必要的代码。

HTML:

<div id="landing-images">
    <div class="leftLanding left">
        <div class="imageCover">
        </div>
        <div class="imageCenter">
            Test
        </div>
        <img class="landingImage" src="assets/landingIMG1.png">
    </div>
    <div class="rightLanding right">
        <div class="imageCover">
        </div>
        <div class="imageCenter">
            Test
        </div>
        <img class="landingImage" src="assets/landingIMG3.png">
    </div>
    <div class="leftLanding left">
        <div class="imageCover">
        </div>
        <div class="imageCenter">
            Test
        </div>
        <img class="landingImage" src="assets/landingIMG2.png">
    </div>
</div>

CSS:

.leftLanding {
    display: flex;
    position: relative;
    width: 85%;
    margin-left: 3%;
    transition: all 0.5s ease;
}

.imageCenter {
    position: absolute;
    width: 25%;
    height: 30%;
    align-self: center;
    z-index: 100;
}

Answer 1

如果添加此规则，其中 flex: 1 告诉 flex 元素(在本例中为第一个 div 和最后一个 img)占用所有可用空间(因为他们是 2 他们分享 50/50)

.leftLanding div:first-child,
.leftLanding img{
    flex: 1;
}

并且像这样使用 left: 50%, transform: translate(-50%) 会起作用

.imageCenter {
    position: absolute;
    width: 25%;
    height: 30%;
    align-self: center;
    z-index: 100;
    left: 50%;
    transform: translate(-50%);
    border: 1px solid gray;
}

在两者上添加边框以便清楚显示

.leftLanding {
    display: flex;
    position: relative;
    width: 85%;
    margin-left: 3%;
    transition: all 0.5s ease;
    border: 1px solid gray;
}

.leftLanding div:first-child,
.leftLanding img{
    flex: 1;
}

.leftLanding div:first-child {
    background: lightblue;
}

.imageCenter {
    position: absolute;
    width: 25%;
    height: 30%;
    align-self: center;
    z-index: 100;
    left: 50%;
    transform: translate(-50%);
    border: 1px solid gray;
}

<div id="landing-images">
    <div class="leftLanding left">
        <div class="imageCover">
        </div>
        <div class="imageCenter">
            Test
        </div>
        <img class="landingImage" src="http://placehold.it/150/f00">
    </div>
    <div class="rightLanding right">
        <div class="imageCover">
        </div>
        <div class="imageCenter">
            Test
        </div>
        <img class="landingImage" src="http://placehold.it/150/f00">
    </div>
    <div class="leftLanding left">
        <div class="imageCover">
        </div>
        <div class="imageCenter">
            Test
        </div>
        <img class="landingImage" src="http://placehold.it/150/f00">
    </div>
</div>