Why are my CSS centring styles being ignored?

Question

I have the following HTML & CSS:

body {
  font-size: 16px;
  overflow: scroll;
}
html {
  position: absolute;
  min-height: 100%;
}
.mainContainer {
  position: absolute;
  padding-top: 40px;
  margin: 0px auto;
  width: 1200px;
}
.mainpagetitleContainer {
  position: absolute;
  padding-top: 20px;
}
.mainpagetitle {
  font-size: 4em;
  font-weight: 300;
  margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
  color: #333;
  width: 400px;
  margin: 0px auto;
  font-size: 1.2em;
  font-weight: 300;
}

<div class="mainContainer">
  <div class="mainpagetitleContainer">
    <div class="mainpagetitle">
      Text.
    </div>
    <div class="subtitle">
      Text.
    </div>
  </div>
</div>

I am attempting to centre my divs as outlined in this answer to Horizontally center a div in a div, however my divs seem intent on being stuck to the left-hand side of the page rather than the centre.

The idea is to have a background and a central column to the page, like so:

I tried messing with margin: 0px auto; to no effect.

What am I doing wrong, and how can I fix this?

score 2 · Accepted Answer · answered Jul 04 '16 at 18:10

To center divs horizontally using margin: 0 auto, you should use position relative on container and on inner divs.

Try something like this:

body {
  font-size: 16px;
  overflow: scroll;
}
html {
  position: relative;
  min-height: 100%;
}
.mainContainer {
  position: relative;
  padding-top: 40px;
  margin: 0px auto;
  width: 1200px;
}
.mainpagetitleContainer {
  position: relative;
  padding-top: 20px;
}
.mainpagetitle {
  font-size: 4em;
  font-weight: 300;
  margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
  color: #333;
  width: 400px;
  margin: 0px auto;
  font-size: 1.2em;
  font-weight: 300;
}

To understand more about layout in CSS, I recommend reading this site: http://learnlayout.com/toc.html

Oriol · Answer 2 · 2016-07-04T18:06:32.833

1

Just get rid of absolute positioning.

Using position: absolute on html makes it shrink-to-fit. Since .maincontainer is out-of-flow, body will be 0px wide. Then centering makes no sense.

And just adding auto margins won't center an absolutely positioned element. You would also need left: 0 and right: 0.

body {
  font-size: 16px;
  overflow: scroll;
}
html {
  min-height: 100%;
}
.mainContainer {
  padding-top: 40px;
  margin: 0px auto;
  width: 500px;
  background: yellow;
}
.mainpagetitleContainer {
  padding-top: 20px;
}
.mainpagetitle {
  font-size: 4em;
  font-weight: 300;
  margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
  color: #333;
  width: 400px;
  margin: 0px auto;
  font-size: 1.2em;
  font-weight: 300;
}

<div class="mainContainer">
  <div class="mainpagetitleContainer">
    <div class="mainpagetitle">
      Text.
    </div>
    <div class="subtitle">
      Text.
    </div>
  </div>
</div>

edited Jul 04 '16 at 18:06

answered Jul 04 '16 at 18:00

Oriol

274,082
63
437
513

Using `position: absolute` keeps my site design together on screen resolutions other than my primary monitor is running, so no, not a good idea. I'm also not competent enough in CSS to do media queries either. – AStopher Jul 04 '16 at 18:06
1

@cybermonkey Exactly. Why are you using `position: absolute`, then? – Oriol Jul 04 '16 at 18:07
1

there's absolutely nothing wrong with this answer. `margin` and `position:absolute` are like oil and water. – Alex Jul 04 '16 at 18:15
1

@xandercoded I must have been downvoted by `position: absolute` fanatics or something. It's incomprehensible. – Oriol Jul 04 '16 at 18:19

Why are my CSS centring styles being ignored?

2 Answers2