CSS:不会以最大宽度居中div

Question

我有以下页面结构:

<div class="main-container">
    <div class="content">
        <table>

        </table>
    </div>
</div>

我希望outher div main-container有max-width: 800px;,并且内部div被包裹在一个表中并且与表一样.也<div class="content">应该在他的父div中居中 - main-container.我在这做错了什么？的jsfiddle

工作示例: jsfiddle

Answer 1

我有类似的问题.设置

margin-left: auto;
margin-right: auto;

在内部div为我工作.

Answer 2

如果您需要.content为内联块,只需设置容器.content和内容即可text-align: center.您将无法使用内联块元素居中text-align: left

Answer 3

我试过这个并且它有效

.element-container{
   width:100%;
   max-width: 700px;
   margin: 0px auto;
}
.element{
   width: 80%;
   max-width: 700px;
   height: auto;
   margin-left: 10%;
}

Answer 4

您可以使用display: flex，因为它减少了很多 CSS 代码，如下所示；

.main-container {
    display:flex;
    justify-content: center;
}

演示