How to Position an Element Absolute from Center - CSS

Question

For a client, I need to put together an absolute div to the left of the body containing an advertisement. The only way I have figured out how to do this thus far is to create an absolute div. The issue here is that in the absolute positioned div, there is a black space (which is the end of the body) and I need to have this "gutter space" ad hugging the page.

To account for this, the best method is to position this a set number of pixels away from the center of the page. I thought I could do this by the following code:

position: absolute;
left:50%;
margin-right:500px;

However, this just keeps the div in the center of the page. Is it possible to position an absolute div from the center of a page?

Bourdon

Not with CSS, but if JavaScript, or one of the many libraries, is an option it's not too hard. Though there is quite some math to be applied to do so. – Doublestop

Hmm... What would the syntax be for this? I know the width of the page - it's a fit width - I just need to be able to position this from center. Would I need to calculate browser width with javascript then apply the math? – Bourdon

if its a fixed width container then you can add position relative to the container and position the advertisement from within the container.. if the advertisement is a child of the container – Nonconductor

adbox will be 125px fixed width: site itself (and current wrapper) is 988 width – Bourdon

Answer 1

If you know the width of the advertisement then you can do this:

position:absolute;
left:50%;
margin-left:-250px;
width:500px;

notice the negative margin-left which is half of the width of the element to be positioned

Nonconductor

I don't think I understand the logic. I want it a fixed width away from the center - why does margin-left have to be half the width? By width - you are referring to width of the ad, correct? This doesn't seem to take the width of the page into account. – Bourdon

have you tried it? You can increase the margin-left to whatever you want – Nonconductor

This should work, just adjust the margin left to the offset you need from the center. – Aun

I noticed this answer only after editing mine.. Yes, this is the correct solution: try it. – Project

Note: If you're looking for a Responsive centering solution then see my other answer – Nonconductor

Answer 2

If you want to center something and keep it responsive width/height then you can use viewport units & with good browser support

By setting an element's width, height and margins in viewport units, you can center it without using any other tricks.

Here, this rectangle has a height of 60vh and top and bottom margins of 20vh, which adds up to a 100vh (60 + 2*20) making it always centered, even on window resize.

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

Read more here

Nonconductor

Answer 3

If it's not fixed width you can do:

position: absolute;
left: 20%;
top: 20%;
height: 60%;
width: 60%;

Proof here.

Pori

Our page is fixed width 988 and this didn't do much for it. Thanks though. – Bourdon

Answer 4

You can do easily in CSS. Working in All major browsers

<style type="text/css">
    #outer{
        width:100%;
        height:250px;
        background:#232323;
        position:relative;
    }

    #inner{
        position:absolute;
        width:300px;
        height:200px;
        background:red;
        top:0;
        left:50%; /*Important*/
        margin:-150px; /* WIDTH/2 */
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>

Paulapauldron

Answer 5

In 2020, the correct way to do this is using calc(). There is no center property; positioning is done from corners. So we first take the position from center using 50% from left or right, and then add or remove a value from center as needed.

So to use left to position from the center, use this. We are positioning 500 pixels to the right of center here, but a negative value (left of center) or using other units would be fine too (relative or fixed).

.example {
  left: calc(50% + 500px);
}

To use the right property for this example, it's:

right: calc(50% - 500px);

References:

• https://caniuse.com/#feat=calc
• https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Hubbub

Answer 6

You can make a container div at center, and place your div inside it this way:

<style type="text/css">
#container {
    position: relative;
    left:50%;
    padding-right:500px;
}
#left {
    position:absolute;
    left:-500px;
}

</style>

<div id="container">
    <div id="left">a</div>
</div>

Aguirre

Didn't do the trick - this method isn't letting me go wider than the body. – Bourdon

This was the closest method, but the body of the document goes outside of this and this doesn't show the ad. I tried changing the z-index, but didn't have any luck. – Bourdon

Answer 7

You don't necessarily need to give it absolute position.. You could exploit the default overflow behaviour of block elements.. For example, you could achieve the desired result by using a code like this:

MARKUP:

<div id="adbox">
    <div class="content">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh  odio, sollicitudin vel sodales vel, dignissim sed lacus. Praesent sed  erat sed turpis gravida congue. Nulla facilisi. Nunc eros eros, auctor  et auctor in, tempor quis magna. Curabitur in justo libero.</a>
    </div>
</div>
<div id="main-content">
    <p>Curabitur iaculis, dolor eu interdum fermentum, mi mauris vulputate est,  tempus rhoncus leo dolor nec orci. Duis a ante augue. Suspendisse  potenti. Proin luctus ultrices ligula, ac luctus lorem pellentesque non.  Curabitur sit amet eros dui, quis laoreet felis.</p>
</div>

STYLE:

#adbox {
    width: 400px;
    height: 0px;
    position: relative;
    z-index: 0;
    margin: 0 auto;
}
#adbox .content {
    background: #EEE;
}
#main-content {
    width:300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: #CCC;
}
#main-content p {
    padding: 0 5px;
}

IE warning: in IE <= 6 the height property is interpreted as any other browser does with min-height: you might want to add some specific style to fix this issue.

---

Or else, you could absolutely position the ad and go this way: http://jsfiddle.net/bssxg/10/

#adbox { width: 400px; position: absolute; z-index: 0; top: 0; left: 50%; margin-left: -200px; }

(the left negative margin being equal to half the width of the ad box)

Project

Answer 8

This would do the trick

.centered {
    //Assume image is 100 in height and 200 in width
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px; // applying a negative top margin of half the images height
    margin-left: -100px; // applying negative left margin of half the images width
}

Guesthouse