Centering horizontally an absolute position element

Question

I'm not sure if I'm losing my mind, so I came to Stack (cause I doubt I'm alone here).

Trying to center horizontally an absolute positioned div. The div has a non-repeating background image. Tried all sorts of margin and cowboying attempts..... what am I supposed to do?

This is the latest attempt (there have been previous ones without the bottom: 0, etc:

  .somediv {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left:0;
    right:0;
    bottom: 0;
    z-index: 99999;
    background-image: url('../assets/images/notporn.png');
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: auto;
  }

What is the expected output? Like, some div (with a background) that is not 100% centered in the parent container? — Chris Happy, Mar 14 '21 at 00:53
The background image at 100% of its original size, centered horizontally within the page. (its a small logo - at the top of a page) — gcubed, Mar 14 '21 at 00:55

score 1 · Answer 1 · edited Mar 14 '21 at 03:34

Responsive Solution

The CSS declarations marked as important are required to position the image dynamically to the width and height of the parent container.

.parent {
  position: relative;  /* important */
  width: 300px; /* i'm using 100px more than the image's width and height for 50px on each side of the image for you to notice the image in the middle of it's parent */  /* important */
  height: 400px; /* important */
  background-color: red;
}

.child {
  position: absolute; /* important */
  top: 50%;  /* important */
  left: 50%;  /* important */
  transform: translate(-50%, -50%);  /* important */
  margin-left: auto; /* not important */
  margin-right: auto;  /* not important */
  z-index: 99999;
  width: 200px;  /* important */
  height: 300px;  /* important */
  background-image: url('https://picsum.photos/id/237/200/300'); /* important */
  background-repeat: no-repeat;
  background-size: auto;
}

<div class="parent">
  <div class="child"></div>
</div>

score 0 · Accepted Answer · answered Mar 14 '21 at 01:08

0

If you have a fixed width on the image you could use calc() to subtract half of the width from 50% and add that to your left and right. In this example I gave the image a width of 200px. Does that work for you?

.somediv {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left: calc( 50% - 100px);
    right: calc( 50% - 100px);
    bottom: 0;
    z-index: 99999;
    background-image: url('../assets/images/notporn.png');
    width: 200px;
    height: 200px;
    border: 2px solid red;
    background-repeat: no-repeat;
    background-size: auto;
  }

<div class="somediv"></div>

answered Mar 14 '21 at 01:08

Bert W

314
2
6

I never knew vanilla css had calc! This is amazing. I wasn't crazy, just a newb! – gcubed Mar 14 '21 at 01:15
Glad it works for you! Yeah, calc() can do some really cool stuff in css, especially cause it makes it so easy to be responsive – Bert W Mar 14 '21 at 01:16

Brebber · Answer 3 · 2021-03-14T06:37:13.797

YOUR CODE IS NEARLY CORRECT AND THE TRADITIONAL WAY

There are many ways to realize a solution. I believe the best way is to do it the most simple way. You do not need sizes, percentages or transformations to realize a universal working solution.

To do that your code is on the way and nearly correct. At the end you missed only one property to get your solution running. And indeed your code is the common and easiest technique to for realising an universal centered layer element to any parent container.

I added the property and cleaned your code up from not needed elements. Just see comments in the code.

.container {
    /* needed */
    position: relative;

    /* 
    for testing/demonstration
    make container visible for testing
    THIS color must be covered completely from inner centered div 
    */
    background: magenta;
    margin: 20px auto;
    width: 300px;
    height: 200px;
}


.center_xy {

    /*  
    centering part
    ONLY NEEDED CODE FOR ABSOLUTE CENTERING
    = typical code to realize a overlay layer
    it covers the parent div autmatically WITHOUT using fix or percentage sizes
    */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;

    /*
    your styling part
    adding background image
    you only missed to add the position to the background image
    */
    background-image: url('https://dummyimage.com/100x100/006400/fff.png&text=-+logo+-');
    background-repeat: no-repeat;

    /* 
    THIS IS WHAT YOU MISSED
    add position  to background image 
    */
    background-position: center;


    /* 
    some cleanup
    not needed ....
    width: 100%;
    height: 100%;
    background-size: auto;
    */

    /* 
    testing part
    make centered container visible 
    this color has to cover all ... 
    */
    background-color: yellow;

}

<div class="container">

    <div class="center_xy"></div>

</div>

UPDATE
Just a polite additional notice. If there is no other reason than to position a logo centered in an otherwise empty positioning-wrapper/container I would like to add the polite hint ... in THAT case an overlay element is not needed. In THAT case you could add the logo image by css direct centered to the background as seen in the example ... or use property flexbox to easy xy centering the logo added in html by <img> tag.

Centering horizontally an absolute position element

3 Answers3