I can't get a div to center horizontally

Question

I can't get a div #buttonwrap to center on my site. I have tried every option that is suggested in this similar post. But it still doesn't work. And what is strange is that #backgroundwrap works fine with the same code. I have linted my CSS and HTML markup, but no help.

Hope someone can help me solve this issue, it has been driving me crazy and delete nearly all my code! The full code is online here: http://setup.industries/projects/masqueradeclassix/

.buttonwrap {
    margin: 0 auto;
    position: relative;
    width: 100%;
    display: block;
    float: none;
}

/* parent */

#container {
    width: 100%;
    height: 100%;
 }

@praveen this is not a duplicate as mentioned in the post – SaroGFX Jan 18 '19 at 16:02 — SaroGFX, Jan 18 '19 at 16:02
Okay, will check it out. – Praveen Kumar Purushothaman Jan 18 '19 at 16:18 — Praveen Kumar Purushothaman, Jan 18 '19 at 16:18

score 2 · Accepted Answer · answered Jan 18 '19 at 16:30

2

width: 100%;
margin: 0 auto;

It's 100% wide, with auto margins.

So the margins are computed to put it in the center.

i.e. 0 on the left and 0 on the right.

It is centered.

answered Jan 18 '19 at 16:30

Quentin

914,110
126
1,211
1,335

Thank you! Is there a way to have the div be ONLY the width of the ul > li that it contains? How would you go about that? – SaroGFX Jan 18 '19 at 17:14

score 1 · Answer 2 · answered Jan 18 '19 at 16:22

1

Alright, this is what you need. I really wanted you to find out the solution from there, but here you go:

.buttonwrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Preview

answered Jan 18 '19 at 16:22

Praveen Kumar Purushothaman

164,888
24
203
252

1

I made a really dumb mistake by making the child div also 100%. Feel stupid now :) Thank you anyway Praveen. – SaroGFX Jan 18 '19 at 16:46

score 1 · Answer 3 · answered Jan 18 '19 at 16:29

1

If the width is 100%, it makes no sense to center the element using margin: 0 auto; - it already fills the width of its container. Make the width a value smaller than 100%, or a fixed pixel value.

answered Jan 18 '19 at 16:29

Johannes

64,305
18
73
130

1

I made a really dumb mistake by making the child div also 100%. Feel stupid now :) Thank you @Johannes – SaroGFX Jan 18 '19 at 16:47

I can't get a div to center horizontally

3 Answers3