css居中处理

居中的方式有很多，其中，有不少是伪居中，具体表现为看样子是居中了，但是详细查看位置后发现其实没有居中，在这里提供两种居中思路：绝对位置居中以及弹性盒子居中

绝对位置居中

绝对位置居中的核心思想就是通过绝对定位的方式实现居中，具体操作如下：

style{
    //给父体一个绝对定位
    .div{
    position: relative;
    }
    //给子体相对定位
    .object{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
}

top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置， translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

弹性盒子居中

弹性盒子居中主要使用justify-content、 align-items 属性，

justify-content:center;/* 子元素水平居中 */

align-items:center;/* 子元素垂直居中 */

其中justify-content是flex布局中父项的一个比较常见的属性，justify-content 属性定义了项目在主轴上的对齐方式。

align-items属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。不同取值的效果如下所示： align-item

align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果（当然要看具体的属性值）。