Issue horizontally centering an element with absolute position - html

Question

I have searched for similar questions however unfortunatley the left:50% soultion does not work here.
I have a container (.leftLanding) with a relative postion, inside this I have a div with an absolute position (.imageCenter) which I would like to center horizontally. Adding left: 50% doesn't actually center it however as the container has a with of 85% I also tried 42.5% but this didn't work either.
I've removed all unnecessary code.
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

If you add this rule, where flex: 1 tells the flex items (in this case the first div and the last img) to take all the available space (and since they are 2 they share it 50/50)
.leftLanding div:first-child,
.leftLanding img{
flex: 1;
}
And the use left: 50%, transform: translate(-50%) like this it will work
.imageCenter {
position: absolute;
width: 25%;
height: 30%;
align-self: center;
z-index: 100;
left: 50%;
transform: translate(-50%);
border: 1px solid gray;
}
Added borders on the two so it clearly shows
.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>

Answer 2

To center an absolutely positioned element horizontally, use a combination of left: 50%; transform: translateX(-50%); and it will center it relative to it's closest non-static positioned ancestor.
Though I'm not sure what you're trying to do with this layout, so not sure if that's really what you're looking for, but added some borders/background colors to show the children are centered horizontally.
I have a container (.leftLanding) with a relative postion, inside this I have a div with an absolute position (.imageCenter) which I would like to center horizontally.
This will center .imageCenter in .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

Try to set the .imageCenter to width:100% and style display:block margin:auto to the img tag
.imageCenter {
position: absolute;
width: 100%;
height: 30%;
align-self: center;
z-index: 100;
}
img{
display: block;
margin: auto;
}