How to center a div (Also why i should not use )?

Question

I got 2 questions. 1st one is, how to center a div in HTML5. And why i should not use <center>? It still works

this is my code

<div class="fb-share-button" data-href="http://www.mathijsc.net/id/' . $row['Id'] . '" data-layout="button_count" data-mobile-iframe="true" data-size="large" style="margin:0px;left: 50%;transform: translate(-50%, -0%);">
    <a class="fb-xfbml-parse-ignore" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" target="_blank">Share</a>
</div>

Already answered here http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page — Hitesh Misro, Aug 03 '16 at 13:37
`` tag explanation is here: http://stackoverflow.com/q/1798817/5743988 — 4castle, Aug 03 '16 at 13:38

score 1 · Accepted Answer · answered Aug 03 '16 at 13:38

1

Horizontal and vertical:

position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);

Horizontal:

margin: 0 auto;

<center></center> works, but its ugly, outdated way.

answered Aug 03 '16 at 13:38

RaV

1,029
1
9
25

Hey, i only want to center it from left to right, not to top to bottom. Which all things i should add? – Kamal Chhirang Aug 03 '16 at 13:40
just `margin: 0 auto;` – RaV Aug 03 '16 at 13:40
eventually: `position: absolute; left: 50%; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0);` – RaV Aug 03 '16 at 13:41
not working http://kchere5.16mb.com – Kamal Chhirang Aug 03 '16 at 13:41
oh let me try the 3rd comment one – Kamal Chhirang Aug 03 '16 at 13:42
Which element are you trying to center? – RaV Aug 03 '16 at 13:43
I believe the horizontal and vertical example needs a few more properties and explination. Same with the horizontal example. You will need to add positioning values on multiple elements for the first example and the second example requires a width to be set to work. – hungerstar Aug 03 '16 at 13:46
@KCUploads Apply `text-align: center` to either the `div` or the `a` – 4castle Aug 03 '16 at 13:47
Bro, how to do it with position as relative? – Kamal Chhirang Aug 03 '16 at 13:55

Fabian Sierra · Answer 2 · 2016-08-03T13:44:19.373

I think that you need something like this:

<div class="content">
  <div style="border: 1px solid #000; margin:0 auto; width: 500px;" class="fb-share-button" data-href="http://www.mathijsc.net/id/' . $row['Id'] . '" data-layout="button_count" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Share</a>
  </div>
</div>

You should use margin: 0 auto;

How to center a div (Also why i should not use )?

2 Answers2