need help CSS centering with absolute positioning

StackOverflow https://stackoverflow.com/questions/1034449

  •  06-07-2019
  •  | 
  •  

Question

I've never been totally satisfied with my various solutions to centering content in a web page. the <center> tag has been deprecated back in the middle of the 18th century, but I fail to see a reasonable alternative. Specifically what I want is to have a parent DIV that is centered, but against whose upper left hand corner I can set things "absolutely".

Is there a way to accomplish this without using window.onresize javascript that remeasures everything? It seems like a fairly straight forward idea... I want things absolutely positioned, I just want the 0,0 coordinate to be relative to something other than the top left corner of the browser window.

Right now, what I do is set a div to center its content and then noodle around with relative positioning, but that's very tiresome because relative objects keep pushing each other around in ways that I totally don't want.

Any and all thoughts on this greatly appreciated.

Was it helpful?

Solution

Is this what you are looking for ?

<div style=" position: absolute;
             display: inline-block;
             top: 20%;
             bottom: 20%;
             right: 20%;
             left: 20%;
             background-color: #434154;
             text-align: center;">
    <div style="display: inline-block;
                height: 100%;
                vertical-align: middle;"></div>
    <div style="position: relative;
                color: #FFFFFF;
                background-color: #546354;
                display: inline-block;
                vertical-align: middle;">
               THIS IS CENTERED WITHOUT SCRIPTING :D
    </div>
</div>

OTHER TIPS

body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }

Just example code, but any .child element would be at 0,0 of the wrapper

Any absolutely positioned element will absolutely position to it's nearest position-relative parent. If an element doesn't have a parent with position relative, it just uses the document. Below is an example without classes (some color and width styles added for clarity).

<html>
    <body style="text-align: center;">
        <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
            <div style="position: absolute; left: 0; top: 0;">
                This will absolutely position relative to the container div.
            </div>
        </div>
        <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
            This will absolutely position relative to the document
        </div>
    </body>
</html>

If you're sticking with position: absolute; then set the div that you want things positioned against to have position: relative; to make it into the positioning context for any child elements.

To center an absolutely positioned div you need to know it's width, then use the following CSS:

#wrapper {
    width: 800px;
    margin: 0 auto;
    position: relative; /* creates a positioning context for child elements */
}

#child {
    position: absolute;
    width: 400px;
    left: 50%;
    margin-left: -200px;
}

And the HTML:

<div id="wrapper">
    <div id="child">
        ....
    </div>
</div>

You can tweak the width and left margin as you need it (the negative left margin should be half of the width of the div you are centering eg. #child.

As other people have mentioned using margin: 0 auto; on an element with a width set on it will center it.

I nice way to center stuff is to use the "margin:auto" css tag. This works in FF and Safari. Just give a div some width and a margin auto, and if the parent is 100% width, then this div will center align itself.

For this to work in IE, you have to use the text-align:center attribute on the parent and then text-align left on the actual centred div.

AFAIK, there is no way to change the absolute co-ordinates from 0,0 to some other arbit point. Relative is the way to go.

maybe I didn't understand the task but I think you can use

margin: 0 auto;

for centering your divs

Use relative positioning on the parent and give that same element the property:

margin: 0 auto;

The parent is now positioned and you should be able to set elements absolutely within it.

Example:

div#page{
  position:relative;
  width:400px;
  margin:0 auto;
}

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}

The easiest way:

#element {

position: absolute; /*Absolute Position*/

top: 0; 
left: 0;          /*Set the 4 coordinates to zero*/
bottom: 0; 
right: 0;

margin: auto;      /*Margin to Auto*/

height: 150px;   /*Set the Height and Width*/
width:150px;

background:green; /* Backgroung:optional*/

}

This will bring it right at the middle, no matter it's size.

Hope that helps!

See Fiddle: http://jsfiddle.net/kfPC6/

Don't you want relative positioning if 0,0 is going to be relative to a div?

The text-align: center; property does what <center> used to and it is vastly superior to it.

Only thing is, it's a bit more complex to use. Once you get the hang of it, you'll wonder why you were having so much trouble before!

You must use it in coordination with the properties of other elements on the page. That is the issue developers/designers have with CSS and newer HTML technologies. It gives us a powerful way to present our page elements but makes it much more complex and strict.

Mike Robinson's answer certainly solves the problem you're having here and it's a great example. But...

I don't think any one answer will show you how to use text-align properly for all cases you'll come across but try looking into how positioning in CSS works more in-depth.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top