How do I center a DIV with no parent?

Question

I want to center my form in the center of teh horizontal row it is in. I thought this would be as simple as

#control {
    text-align: center;
}

The element I want to center is

<div id="control" class="btn">
    <div id="btn_container"><img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /></div>
    <span>Start</span> 
</div>

However, the element is still not being centered -- https://jsfiddle.net/xwdnvcy5/58/ . I'm not getting something really obvious, but I can't tell what it is.

Your fiddle doesn't match your question code at all. Yopiv – random_user_name Apr 10 '18 at 18:54 — random_user_name, Apr 10 '18 at 18:54

score 7 · Accepted Answer · edited Oct 30 '19 at 14:26

7

This one is not very intuitive, but try setting the margin to 0 auto.

#control {
    margin: 0 auto;
}

edited Oct 30 '19 at 14:26

Cellcon

1,245
2
11
27

answered Apr 10 '18 at 18:52

Jonathan Barker

124
5

Not sure why I am getting down votes, checked it in the above jsfiddle and guess what. It works. – Jonathan Barker Apr 10 '18 at 18:57
If I had to guess I think you got the downvote for not formatting the question correctly? I gave you an upvote though because the answer was technically correct, just little effort. – Simon Apr 10 '18 at 18:59

score 0 · Answer 2 · answered Apr 10 '18 at 18:58

0

The answer is quite simple actually. You need to set the margin-left/right as auto.. like this:

#control {
        margin: 0 auto;
}

answered Apr 10 '18 at 18:58

Simon

2,498
3
34
77

score 0 · Answer 3 · answered Apr 10 '18 at 18:59

0

Are you try to center the #control div? Try this

#control {
  position:relative;
  left: 50%;
  transform: translateX(-50%);
}

answered Apr 10 '18 at 18:59

Yi Zhou

803
1
8
24

This works but is unnecessarily complicated I think, a simple `margin: 0 auto` works fine for this sort of thing. – Simon Apr 10 '18 at 19:01
I guess in his case it works, since he has another .btn class and it has display: table; also not sure why .btn has text-align: left, then #control has text-algin:center – Yi Zhou Apr 10 '18 at 19:03

How do I center a DIV with no parent?

3 Answers3