如何将div元素居中？

Question

我正在尝试使用以下代码将div元素居中，这可以正常工作。但是，当我将顶部/底部边距更改为0以外的任何值（例如margin：10 auto;）时，div会与页面左侧对齐，这是为什么呢？

#container {
    width: 960px;
    height: 960px;
    border: 1px solid grey;
    font-size: 0;
    margin: 0 auto;
}

Answer 1

您需要添加保证金值'单位ex（px，rem，em）

#container {
    width: 260px;
    height: 260px;
    border: 1px solid grey;
    font-size:9px;
    margin: 10px auto;
}

<div id='container'>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>