-1

I am trying to get my content div to center but using the current method it is to the right instead of being dead center.

#content {
    width: 620px;
    height: 2000px;
    position:absolute;
    top: 300px;
    left:50%;
    margin-right: 310px;
    background-color: #0F0;
    padding: 0;
    margin: 0px;
}
jantimon
  • 36,840
  • 23
  • 122
  • 185
bilbsy
  • 67
  • 1
  • 10
  • The answer below is a good guess, but really, without seeing the entire document, it's hard to know for sure. – crush Apr 05 '13 at 15:47
  • 1
    Welcome to Stackoverflow! You can search up questions before you ask them so there are less duplicates. On such example is http://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css. – Alfred Xing Apr 05 '13 at 16:09

5 Answers5

4

You should use margin: 0 auto; with width; then It will be in center from its parent item.

crazyrohila
  • 616
  • 4
  • 9
  • This is a content div, it's pretty clear this is not best practice and the guy should not use position: absolute in the first place for this purpose. – Michael Apr 05 '13 at 15:53
  • Not with positioning. just width, height, background-color and padding. [something like this](http://jsfiddle.net/MvSyx/embedded/result/) with your code – crazyrohila Apr 05 '13 at 15:53
2

As long as you div has a width:

 #content {
   width: 620px;
   margin: 0 auto;
}
matpol
  • 3,042
  • 1
  • 15
  • 18
  • he's using absolute. `margin:auto` means nothing. – Casey Dwayne Apr 05 '13 at 15:51
  • yep and my answer is not absolutely positioned! He say nothing about it having to be absolutely positioned. You want to move the container down: margin: 300px auto 0; – matpol Apr 05 '13 at 15:53
  • He shouldn't be using absolute: positioning for this purpose in the first place. Ever heard of best practices @yUnoDOWNVOTE ? – Michael Apr 05 '13 at 15:54
  • @Michael I know this. Just answering the question. He probably has a bad case of absolute divitis. I see it a lot. Based on the question I'm guessing he's stuck without a major rewrite. – Casey Dwayne Apr 05 '13 at 15:56
  • @yUnoDOWNVOTE , yes this is most likely the case, but any answer that solves his absolute position problem should first say that it is not best practice. Provide a method for how it should be done, then solve the issue at hand. Otherwise someone who stumbles across this question in the future could come down with absolute divitis when they shouldn't have to. – Michael Apr 05 '13 at 15:57
  • 1
    @Michael Agreed. Updated answer to mention that. – Casey Dwayne Apr 05 '13 at 16:03
1

To center object with absolute positioning, 

top:50%;
left:50%;
margin-top:-1000px; /* half of size */
margin-left:-310px; /* half of size */

Simple as that!

**Absolutes are a last resort, usually used inside a relative position element. Careful, if you have a case of absolute 'divitis' (using divs for everything and positioning them with absolute because you're unfamiliar with best practices)

It's better to use margin:auto to center horizontally.

Casey Dwayne
  • 2,142
  • 1
  • 17
  • 32
  • hey, I didn't code it, just answering the question :) Absolute should rarely ever used. New coders use it because it's more simple to them. I thought it a bit large also. – Casey Dwayne Apr 05 '13 at 15:53
  • Downvote if you like. With absolute, that's how it's done. I use it for pop-ups, like everyone else. – Casey Dwayne Apr 05 '13 at 15:56
0
#content{
    width: 620px;
    Left: 50%;
    margin-left: -310px;
}

You want to use -50% of the total width of the #content div to move it over 50% - kind of tricky :)

What have you tried
  • 11,018
  • 4
  • 31
  • 45
0

You shouldn't be using position: absolute; for this purpose in the first place.

All you need is to define a width, then use margin: 0 auto; to center the div.

For example...

#content {
width: 960px;
margin: 0 auto;
}

Here's a JSFiddle... http://jsfiddle.net/cD6pe/

Michael
  • 7,016
  • 2
  • 28
  • 41