Member Avatar for fheppell

I've set up this testing website
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="" 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

  • 4 Contributors
  • 4 Replies
  • 223 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fheppell

Dani AI

Generated

A concise, modern way to center that content box is to avoid fixed-position <img> backgrounds and the negative‑margin math shared in the replies. is correct that auto margins handle horizontal centering; and showed absolute/negative-margin techniques that work only when the box size is known. For a robust, responsive result use Flexbox (or a transform fallback) and fix the RGBA mistake in the original CSS (RGBA channels must be 0–255, not 500).

Use Flexbox on the page (or a parent container) so the wrapper is centered both ways:

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  align-items: center;      /* vertical */
  justify-content: center;  /* horizontal */
  min-height: 100vh;
  background: url('/path/to/bg.jpg') center/cover no-repeat fixed;
}

#wrapper {
  max-width: 800px;   /* responsive cap */
  width: 90%;
  padding: 10px;
  box-sizing: border-box;
  background-color: rgba(199,199,199,0.8); /* valid RGBA */
}

If changing the parent to flex is not possible, a transform-based fallback centers without needing fixed width/height (safer than negative margins):

#wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 800px;
  width: 90%;
  box-sizing: border-box;
}

Additional notes: prefer CSS backgrounds with background-size: cover instead of a fixed <img>; avoid rgba values outside 0–255; add box-sizing: border-box to keep padding predictable; be aware background-attachment: fixed can cause performance or rendering quirks on some mobile browsers. These approaches remove fragile math and make the layout resilient to variable content and different viewport sizes.

Recommended Answers

All 4 Replies

Member Avatar for TonyG_cyprus

maybe

        margin: auto auto auto auto;

will do it, instead of

        margin-left: auto;
        margin-right: auto;
Member Avatar for pixelsoul

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 for JorgeM

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 for fheppell

Thanks for all the help everyone.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.