Question

我知道这个问题已被问过一百万次，而且我已经在我创建的其他网站上使用了所有这些解决方案，而且工作得很好。

但是，在我最新的情况下，通常的答案对我不起作用。

这是需要在其中居中的其他元素的类（即列表，表）：

.container {
    position: relative;
    width: 80%;
    height: 90%;
    background-color: #282828;
    box-shadow: inset -6px -6px 6px -2px #1d1d1d;
    color: #FFF;
    border-radius: 0 10px 0 0;
    float: left;
}

我添加了position: relative，因为我在<div>内放置了另一个孩子.container，其位置设置为absolute。我实际上设法把事情集中在一起，但那不是我需要的那种中心。当我在.container内添加一个类似于表格的div结构时，它直接向左移动 - 不知道为什么。

我将不胜感激。

JSFiddle： http://jsfiddle.net/J3jm7/3/

Answer 1

居中内联元素

要使内联元素居中，只需在容器上使用text-align:center。

.container {
    text-align:center
}

Demo

居中块级元素

使用margin:auto将块级元素（例如表格）置于其容器中心。

.container table {
    margin:auto;
}

Demo

居中列表

由于li { display: list-item; }，列表有点特殊。要使<ul>居中，您需要将其更改为inline-block元素并将其置于容器中心。

.container {
    text-align:center
}

.container ul {
    padding:0;
    display:inline-block;
}

Demo

Answer 2

您必须在容器内设置元素的左右边距。这是一个示例，稍微修改您的代码，以便您可以看到表元素上发生的居中：

<head>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 800px;
            background-color: #282828;
            box-shadow: inset -6px -6px 6px -2px #1d1d1d;
            color: #FFF;
            border-radius: 0 10px 0 0;
            float: left;
            border:1px solid black;
        }
            .container table {
                width:25%;
                height: 25%;
                margin-left:auto;
                margin-right:auto;
                border:5px solid blue;
            }
    </style>
</head>
    <body>
        <div class="container">
            <table></table>
        </div>
    </body>
</html>

以<div>元素</div>为中心

2 个答案:

居中内联元素

居中块级元素

居中列表