绝对定位下的水平水平和垂直居中

CSS绝对定位下的水平居中原理：

1，先设置div绝对定位的左侧位偏移为整个网页body的一半也就是50%

2，再设置div左侧边距margin-left为这个div自身宽度的一半

如：

 

  .box3 {

        width: 150px;

        height: 26px;

        position: absolute;

        /* 以下2个left和margin-left可以实现绝对定位时的水平居中 */

        left: 50%;

        margin-left: -75px;

    }

CSS绝对定位下的垂直居中原理：

1，先设置div绝对定位的左侧位偏移为整个网页body的一半也就是50%

2，再设置div顶部边距margin-top为这个div自身高度的一半

如：

  .box3 {

        width: 150px;

        height: 26px;

        background: rgb(0, 0, 0, 0.3);

        position: absolute;

        /* 以下2个left和margin-left可以实现绝对定位时的水平居中 */

        top: 50%;

        margin-top: -13px;

        bottom: 10px;

        border-radius: 13px;

    }