css设置设计div居中

任何一个网站都会使用到div层，其中最常见的对于设计师来说就是设计居中。那么如何使用CSS来实现呢？

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    

以上是使用CSS居中的通用代码，下面我们来讲讲为什么。

position: absolute

首先，我们需要将我们的div使用绝对定位，不管是单独的一个层还是在容器中，都需要使用绝对定位。因为只有绝对定位才可以使我们的div不受它的兄弟节点影响。

top: 50%andleft: 50%

我们将div层拉到页面的中心位置，即使层的左上角在页面中央。因此我们需要将层的上边界和左边界都移动到50%的位置。

transform: translate(-50%, -50%)

由于层的上边界和左边界各自是50%的位置，我们需要偏移一半的宽度和高度才能实现完美居中。这就是transform: translate(-50%, -50%)的作用。它会将层的宽度高度的一半向“左上方”移动。

现在，您已经知道了如何通过CSS将div层垂直和水平居中，您可以放心地设计您的网站并使用此代码。祝愉快！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！