如何将div放在整个页面宽度的div内

Question

我有一个div，其宽度为页面的整个宽度。里面是另一个div。

如何将子div放在其父div中，以便当页面重新调整大小并且父div增长时，子div保持在中心？

Answer 1

以百分比形式给出值。将left和top设置为50％，这会将div的左上角移动到父级的中心。然后减去边缘高度和宽度的一半，使得div的中心位于中心（例如，如果高度和宽度都是50px然后减去25px）。例如

css：

#main{
    height: 100vh;
    width: 100%;
}

#secondary{
    width: 50px;
    height: 50px;
    top : 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
}

查看我的js fiddle