HTML element not centering

Question

My gender-reg (child of register-page isn't centering) it stays to the very left for some reason? I need it centered!

.register-page {
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;

  ...

  .gender-reg {
    border: solid yellow;
    @include scale-to-screen((
      margin-bottom: 10px
    ))
  }

<div class="gender-reg">
  <selection-dropdown params="all: allGenderChoices"></selection-dropdown>
</div>

Basically what happens is everything else on the page is centered, except this element. I have zero idea as to why! Usually margin: auto centers it. I'm stuck!

i added an html bit, its basically just a div that surrounds a selection-dropdown. which is just a custom select, but using lists — joe, Dec 21 '16 at 22:50
@joe you can use SASS on JSFiddle. Click the cog icon in the CSS section — Turnip, Dec 21 '16 at 22:53
Where is `gender-reg` element? I cannot see it within your HTML — GROVER., Dec 21 '16 at 22:58
register-page is just a parent div. nothing special about it, i excluded from the example — joe, Dec 21 '16 at 23:02
@takendarkk `.gender-reg { border: solid yellow; @include scale-to-screen(( margin-bottom: 10px )) }` doesn't help — GROVER., Dec 21 '16 at 23:31
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — , Dec 22 '16 at 05:11
There are dozens if not hundreds of questions like this on SO, which would have turned up with a search such as "center div css". — , Dec 22 '16 at 05:11

score 0 · Answer 1 · answered Dec 22 '16 at 03:48

A width of 100% will not center the element, Because there is no extra space.

If you set it to 50% then it will center the element within its parent.

Try this:

.register-page {
  width: 50%;
  height: 100%;
  margin: 0 auto;
  text-align: center;

HTML element not centering

1 Answers1