CSS container won't center

Question

I started writing my first website, and tried to center the container id in CSS using various methods found on the web (the most common of which being margin-left:auto; margin-right:auto;) but it simply won't work, and I have no idea why, or what could I do about it (I know, I could make a table with three columns in the html file, but I don't want to mix and match tables and divs)

My code so far looks like this:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>

<div id="content">
hello world!
</div>

</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

body {
background-color:#FFF; 
}

#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto; 
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}

It will center if you remove the `position:absolute` and the position values...[**This might help**](http://learnlayout.com/) — Paulie_D, Sep 25 '14 at 11:31

score 3 · Accepted Answer · edited May 23 '17 at 12:16

Solution #1:

Replace position: absolute; with position: relative; in #content(CSS).

JSFiddle - DEMO and Full Screen View

body, html {
    background-color:#FFF;
    height:100%;
}
#content {
    width:980px;
    height: 100%;
    background-color:#FCC;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    bottom:0px;
    text-align:center;
}

<div id="content">hello world!</div>

More Info about margin: 0 auto; center to work:

What, exactly, is needed for margin: 0 auto; to work?

Solution #2:

Add left: 50%; and margin-left: -490px; (half width of #content div) to #content

JSFiddle - DEMO and Full Screen View

#content {
    width: 980px;
    background-color: #FCC;
    position: absolute;
    display: block;
    top: 0px;
    bottom: 0px;
    margin-left: -490px;
    left: 50%;
    text-align: center;
}

score 0 · Answer 2 · answered Sep 25 '14 at 11:29

0

Container is in center you need to align text in the center if you want,

align:center

should be

text-align:center;

Demo

answered Sep 25 '14 at 11:29

Dhaval Marthak

17,246
6
46
68

1

I'm not the one... +1 for you and @KieranQuinn – Anonymous Sep 25 '14 at 11:38
I was still trying to center the div, lol (using notepad, so I didn't notice the mistake) thanks for pointing it out – Ileana Profeanu Sep 25 '14 at 13:57

score 0 · Answer 3 · answered Sep 25 '14 at 11:35

0

Are you trying to center the "Hello world" text?? If add

text-align: center;

Instead of

align:center;

answered Sep 25 '14 at 11:35

Kieran Quinn

1,085
2
22
49

score 0 · Answer 4 · answered Sep 25 '14 at 11:46

You can't center something with position: absolute; on it, as far as I know. position: absolute; means, that the div has an absolute positioning to something.

If you want to center it, then you could wrap the container, in a div, with position: relative; on it, and then center that one.

Like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>

<div id="wrapper">
  <div id="content">
  hello world!
  </div>
</div>

</body>
</html>

With this CSS:

@charset "utf-8";
/* CSS Document */

body {
background-color:#FFF; 
}

#wrapper {
position: relative; /* Needs to be there, for the #content-container to know, 
what it's relative to. */
width: 100px; /* Needed as well */
display: block; /* For older browsers */
overflow: hidden; /* For older browsers */
margin: 0 auto 0; /* Adds the margin that centers it. */    
}

#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto; 
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}

The other way is just to replace this from your code:

position: absolute;
top: 0px;
bottom:0px;

With this:

position: relative;

Then your code should work as well...

Why do you want to center it, with position: absolute; ? Perhaps you want to achieve something, that there is another way of doing...

I wanted to make a container div with 100% height, no matter the length of the content it holds (and also, I figured that no space at the top and bottom of the page looks cool). It works using a wrapper, but then the effect I tried to obtain with the height disappears. — Ileana Profeanu, Sep 25 '14 at 13:46

CSS container won't center

4 Answers4

Solution #1:

Solution #2:

Demo