如何居中div（也为什么我不应该使用<center>）？

问题描述：

我有2个问题。第一个是，如何在HTML5中居中div。为什么我不应该使用<center>？它仍然有效如何居中div（也为什么我不应该使用<center>）？

这是我的代码

<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>

：0汽车; **到div –

我该div有一个固定的宽度，你可以使用'margin：0 auto;' –

已经在这里解答http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-页面宽度 –

答

水平和垂直：

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%);

水平：

margin: 0 auto;

<center></center>的作品，但它的丑陋，过时的方式。

嘿，我只想从左到右居中，而不是从上到下。我应该添加哪些东西？ –

只是'margin：0 auto;' – RaV

最终：'position：absolute;剩下：50％; -ms-transform：translate（-50％，0）; -webkit-transform：translate（-50％，0）; -moz-transform：translate（-50％，0）; -o-transform：translate（-50％，0）; 变换：翻译（-50％，0）;' – RaV

答

我认为你需要像这样：

<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>

你应该通过应用CSS **保证金使用margin: 0 auto;

如何居中div（也为什么我不应该使用）？

相关推荐