Question

通常margin-left：auto和margin-right：auto会将父div中的div居中，但此解决方案基于视点大小，这意味着如果父div大小大于视点，这将使孩子居中div只在父div的可视部分内。

如何根据实际的父级大小而不是父级的视点大小来居中子级div？

谢谢，

Answer 1

您可能遇到了另一个问题。带边距的块元素：auto和另一个块元素内的设置宽度，即使容器比视口宽，也会将其置于中心位置。

.hooge-div{
    width: 2000px;
    background: #eee;
    height: 50px;
}

.small-one{
    width: 50px;
    margin: 0 auto;
    background: #111;
    height: 20px;
}

请参阅http://jsfiddle.net/EW7Wy/

Answer 2

如果父div没有特定宽度，则使用自动margin-left和margin-right将仅考虑视点大小。

例如，下面的父div具有特定宽度，子项根据特定宽度居中：

<div style="width: 1200px; background: blue;">
    <div style="margin: 0 auto; width: 50px; background: red;">
        I am the child div.
    </div>
</div>

CSS根据实际父级大小而不是视点大小将父级中的div作为中心

2 个答案: