1,105,556 Community Members

Center vertically and horizontally

Member Avatar
fheppell
Junior Poster
127 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 0 [?]
 
0
 

I've set up this testing website here
It has a full screen background image and a content box in the middle. How would I horizontally center the box.
I'll post the html and css here as well

html, body {
        width: 100%;
        padding: 0;
        margin: 0;


      }

      #full-screen-background-image {
        z-index: -999;
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
      }

      #wrapper {
        position: relative;
        width: 800px;
        min-height: 400px;
        margin: 100px auto;
        color: #333;
        margin-left: auto;
        margin-right: auto;
        padding:10px;
        background-color:#C7C7C7; /*hex fallback for wrapper*/
        background-color: rgba(500,500,500,0.8);
      }

and the html

<img alt="full screen background image" src="http://www.swangardenimages.co.uk/swangardenimages/Gallery/Pages/The_Gardens_of_Easton_Lodge_1_files/Media/Courtyard%20and%20Fountain%20/Courtyard%20and%20Fountain%20.jpg" id="full-screen-background-image" /> 
        <div id="wrapper">
            <h1>Swan Garden Images</h1>
            <p>Yada Yada</p>
            <p>Stuff</p>
            <a href="#">Link</a>
        </div>

Thanks in advance

Member Avatar
TonyG_cyprus
Posting Whiz
329 posts since Dec 2009
Reputation Points: 36 [?]
Q&As Helped to Solve: 47 [?]
Skill Endorsements: 2 [?]
 
0
 

maybe

        margin: auto auto auto auto;

will do it, instead of

        margin-left: auto;
        margin-right: auto;
Member Avatar
pixelsoul
Posting Shark
920 posts since Feb 2011
Reputation Points: 174 [?]
Q&As Helped to Solve: 147 [?]
Skill Endorsements: 25 [?]
 
0
 

You're talking about getting it right in the middle of the screen, right? I am sure there are plent of ways of doing it, I do it with two divs though. You can look at my site for an example http://www.pixelsoul.com

The div that controlls the vertical alignment I called "stretch" and it goes around my main div "wrapper". The only real important style is on the stetch div.

#stretch {
    padding:0 0 30px 0;
    margin: -185px 0 0 0;
    position: absolute;
    top: 50%;
    width: 100%;
}
Member Avatar
JorgeM
IT Addict
6,419 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

Here is another way to accomplish it. I've modified your "wrapper" ID styles as follows:

    #wrapper {
        width:800px;
        height:400px;
        position:absolute;
        left:50%;
        top:50%;
        margin:-200px 0 0 -400px;
        color: #333;
        padding:10px;
        background-color:#C7C7C7; /*hex fallback for wrapper*/
        background-color: rgba(500,500,500,0.8);
    }
Member Avatar
fheppell
Junior Poster
127 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 0 [?]
 
0
 

Thanks for all the help everyone.

Question Answered as of 1 Year Ago by TonyG_cyprus, pixelsoul and JorgeM
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: