Center div on center screen but on top of other divs

HTML & CSS
1

Hi,
I have two divs that are taking the full width of the browser and what I want to do is place a div with my logo right on the center of the screen on the x direction but basically on top of the two divs.

This is what I currently have which kind of works but the div is not completely on the center, I think I would need to subtract half of the width of the center-div in order for it to be on the center but I don’t know how to do that.

See the Pen Jntso by Filemon Salas (@fs_tigre) on CodePen.

HTML:

<div class ="full">Full Width Div1</div>
<div class ="full">Full Width Div 2</div>
<div class ="logo">Logo</div>

CSS:

body{
  color: #fff;
  }

.full{
  background-color: gray;
  height: 100px; 
  margin-bottom: 10px;
}

.logo{
  position: absolute;
  left: 50%;
  top: 50px;
  background-color: black;
  width: 100px;
  height: 100px;
}

Any idea how can this be accomplished?

Thanks a lot

2

To center AP elements you almost have it right. You did left:50% which will place the left edge at the 50% mark. Now you just need to add margin-left:-50px (half the width of the element) and it should be perfectly centered.

2 Likes
3

Another method is to use the transform property. This is especially useful if the width of the element is unknown. The browser support is, however, not as good, and may require prefixing.

transform: translateX(-50%);

2 Likes
4

This worked, thanks a lot.

Thank you all.