javascript - 使元素居中

Question

我怎样才能div使持有其他元素的 a 居中。默认情况下，它似乎div具有其父标签的宽度，在这种情况下body。我想要做的是居中div，我需要自己逐像素设置它的宽度吗？或者有没有更简单的方法来做到这一点。

我在说什么的图片

在图片中，您可以看到 Ive 将宽度设置div #container为250px使其居中，margin: 0 auto;但现在它大于table这意味着 的孩子#container不在确切的中心。

Answer 1

DEMO 1

<div id="container">

</div>

#container{
  display:table;
  margin:0 auto;
}

---

DEMO 2

<div id="container"> 
 <span id="form">

 </span>
</div>

#container{
   text-align:center;
}
#form{
  display:inline-block;
  text-align:left;
}

Answer 2

如何设置顶部和左侧 50%，固定 div 的位置和边距 = 大小？

div {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -your size;
      margin-left: -your size;
    }

Answer 3

您可以尝试百分比而不是 px

<style>
    #container{
        width:30%;
        /* width:250px; will still be ok */
    }
    #container table{
        width:100%;
        /* This will make the table stretch or squash to fill the container */
        /* You could also try */
        margin: 0 auto;
        /* This will center the table inside the div*/
    }
<style>

Answer 4

将父 div 设置为text-align: center;，将包含内容的 div 设置为display: inline-block;

在你的情况下：

body {
text-align: center;
}

#container {
display: inline-block;
}