Divs不会将CSS居中

Question

因此，我有几个要居中的div。 我目前在某些我称之为“容器div”的东西上使用此CSS代码-您以前最有可能听到过这个“容器”的事。

    #container {
    margin: auto;
    width: 75%;
    margin-top: 100px;
}

尽管在调整窗口大小时这似乎不会使div居中；如果我调整窗口大小，则div会缓慢移动，然后-远离中心。

提琴-https://jsfiddle.net/kud3f01n/

是什么导致div的行为如此？

Answer 1

正如您的示例中所验证的那样，我发现您使用边距（负值和高范围值）进行了这些块设计。因此，即使您将主容器宽度设置为75％或其他，它也会从父div溢出。这种CSS将在较小的设备中产生严重问题。

建议：尝试避免这种CSS。而且，如果您需要这种类型的对齐方式并且无法在响应中起作用，还可以使用一些第三方插件，例如masonry.js等。

Answer 2

尝试一下

#container {
height:50px;
width:50px;
position:absolute;
left:50%;
top:50%;
margin: 0 auto;
}