Question

我有2个问题。第一个是，如何在HTML5中居中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>

Answer 1

横向和纵向：

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>可行，但其丑陋，过时的方式。

Answer 2

我认为你需要这样的东西：

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

您应该使用margin: 0 auto;

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

2 个答案: