居中一个元素

Question

如何将持有其他元素的div居中。默认情况下，div似乎具有其父标记的宽度，在本例中为body。我想要做的是将div居中，我是否需要逐个像素地设置它的宽度？还是有一种更简单的方法。

我在谈论

的图片

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

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