6

I want to put an HTML element in the middle of the page, horizontally and vertically, but I'm having a hard time making it align even horizontally. I want to center the div "content". Here is my css:

#background
{
position:absolute; 
width:100%; 
height:100%; 
margin:0px; 
padding:0px; 
left:0px; 
right:0px;
z-index:1;
text-align: center;
}

#content
{
margin-left: auto;
margin-right: auto;
 width: 200px;
 z-index: 2;
 position: absolute;
}

And here is my HTML: 

<html>
<head>
<link REL="STYLESHEET" TYPE="text/css" HREF="style/myStyle.css"> 
</head>
<body style="padding:0px; margin:0px; overflow:hidden;"> 


 <div id="background"><img src="images/backgroundimage.png" width="100%" height="100%">

 </div>

 <div id="content">

 <p>Here is some content</p>
 </div>

</body>
</html>

Since the div has to be positioned as absolute, doing this:

 margin: 0 auto;

Won't work. I'm not sure what to do. Also, I want it in the center of the page vertically. Help is appreciated, thanks.

Edit: I need the background to be in a separate div so that it's re-sizable, and the content doesn't show if the position is relative.

Jack Davis
  • 605
  • 4
  • 11
  • 17
  • 1
    Have you tried adding a background image to #background? i.e. `background:url(images/backgroundimage.png) no-repeat center center;` – Evan Johnson Apr 15 '12 at 20:55
  • 1
    or even use 'background:url(images/backgroundimage.png) no-repeat center centre;' for the #body element. – Shoebox Apr 15 '12 at 21:02
  • good point @MattSrange - yea, the extra divide is not needed if you go the background image route. – Evan Johnson Apr 15 '12 at 21:10
  • Could you make a fiddle of this? – Jack Davis Apr 15 '12 at 21:19
  • 1
    possible duplicate of [How to align a
    to the middle (horizontally/width) of the page](http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page)
     – Rob Aug 14 '15 at 23:04

3 Answers3

6
<html>
<body> 
 <div id="background">
 <div id="content">
  <p>Here is some content</p>
 </div>     
</div>
</body>
</html>

A better structure for put contents on the middle,without use JQuery:

#background{
background: url(images/backgroundimage.png) top no-repeat;
width:100%;
height:100%;
position:relative;
}

#content{
position:absolute;
top:50%;
left:50%;
width :200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
}
José Victor Catalani
  • 81
  • 1
0

If you are using the div id background for a background image you can style the div using css, more info at the w3schools site.

Ideally i would use a background image for the body tag rather than creating a new div with an image.

For centring content try and play around from my example.

Matt

Shoebox
  • 591
  • 2
  • 7
  • 17
  • I put that in a div so that the background is re-sizable. It has a purpose. – Jack Davis Apr 15 '12 at 21:04
  • I like the example, but I want the content to just be centered, without predefined margins so it's scalable. I'm goignto end up putting content in the middle. – Jack Davis Apr 15 '12 at 21:10
  • Do you mean the div element #background to be scalable? [Progressive](http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php). – Shoebox Apr 15 '12 at 21:17
  • that's basically what I'm looking for, but the middle content won't exceed the page. Could you provide a fiddle? – Jack Davis Apr 15 '12 at 21:24
  • The tutorial on full scale progressive background can be found at [css-tricks](http://css-tricks.com/perfect-full-page-background-image/) note that older browsers may have issues. :P – Shoebox Apr 15 '12 at 21:28
0

Try to make the padding a higher number, padding is how many pixels in between the side of the screen and the text/table/picture/object. So padding should be like, say 20-40. Also, try deleting position absolute; it makes the text/table/picture/object always on the left instead of the middle.

Haze811
  • 43
  • 6