Question

我已经搜索了类似的问题但不幸的是左边：50％的灵魂在这里不起作用。

我有一个带有相对位置的容器（.leftLanding），在这里我有一个带有绝对位置（.imageCenter）的div，我希望水平居中。添加左：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;
}

在两者上添加了边框，因此它清晰显示

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

要使一个绝对定位的元素水平居中，请使用left: 50%; transform: translateX(-50%);的组合，并将其相对于其最近的非static定位祖先居中。

虽然我不确定您要对此布局做什么，所以不确定这是否真的是您正在寻找的，但添加了一些边框/背景颜色以显示孩子们水平居中。

我有一个带有相对位置的容器（.leftLanding），在这里我有一个带有绝对位置（.imageCenter）的div，我希望水平居中。

这会将.imageCenter置于.leftLanding中。

.leftLanding {
  display: flex;
  position: relative;
  width: 85%;
  transition: all 0.5s ease;
  background: #aaa;
  border: 1px solid blue;
}

.imageCenter {
  position: absolute;
  width: 25%;
  height: 30%;
  align-self: center;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
  background: #eee;
  border: 1px solid red;
}

<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>

Answer 3

尝试将.imageCenter设置为width:100%并将display:block margin:auto设置为img标记

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

img{
    display: block;
    margin: auto;
}

使用绝对位置水平居中一个元素

3 个答案: