CODEWITHSUNDEEP
csscss-position
Bob Cavezza
Bob Cavezza

Reputation: 2850

How to Position an Element Absolute from Center - CSS

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?

Upvotes: 22

Views: 32086

Answers (8)

user2493235
user2493235

Reputation:

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:

Upvotes: 0

Mark Steggles
Mark Steggles

Reputation: 5553

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

Upvotes: 4

Mark Steggles
Mark Steggles

Reputation: 5553

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

Upvotes: 40

Computernerd
Computernerd

Reputation: 7766

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
}

Upvotes: 0

Mifas
Mifas

Reputation: 21

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>

Upvotes: 1

Lucius
Lucius

Reputation: 963

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)

Upvotes: 0

Istv&#225;n Ujj-M&#233;sz&#225;ros
Istv&#225;n Ujj-M&#233;sz&#225;ros

Reputation: 3247

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>

Upvotes: 0

Linus Kleen
Linus Kleen

Reputation: 34612

If it's not fixed width you can do:

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

Proof here.

Upvotes: 1

Related Questions