Question

简单地说，我在页面中心有一些div但是在这个元素中，我无法将中心设置为嵌套元素。你可以看到这个Demo。在此示例中，我无法在页面中心设置table。但如果我删除table并放置其他元素（例如<p>）而不是该元素，则此元素位于页面的中心位置。

HTML：

<div class="container">
    <div class="inside">
        <div class="nested">
            <table>
                <tr>
                    <td>
                        fdfffffffffffffff
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

CSS：

.container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}

.inside {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.nested{
    text-align:center;
}

Answer 1

您可以使用flexbox显示中心表

小提琴：http://jsfiddle.net/zc2ekw85/1/

.container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}

.inside {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.nested{
    display:flex;
    justify-content:center;
    text-align:center;
}

Answer 2

将您的表格设为width: 100%;。表格单元格<td>将仅占用表格的宽度，而不指定宽度，表格将仅与其内容一样宽。

.nested table {
    width: 100%;
}

jsFiddle：http://jsfiddle.net/zc2ekw85/2/

Answer 3

使用此

table{ width:100%;}

这会将您的表格文字设置为以中心显示

CSS嵌套元素居中

3 个答案: