css.绝对居中和左右居中最常见的几种方法

1. margin居中

最常见的居中方法，利用块元素外边距的特性进行左右居中

定位浮动的特性，让其浮动起来。

/* margin左右居中 */
div{
      margin: auto;
}

/* margin绝对居中 */
div{
      position: absolute;
      top: 0;bottom: 0;left: 0;right: 0;
      margin: auto;
}

2.text-align：center 文本居中

父级设置text-align：center 使子元素左右居中

div{
    text-align:center;
}

3.定位居中

div{
    position: absolute;
    // position: fiexd;
    top: 50%;
    left: 50%;
    /* 定位居中 减自身的一半 */
    /* margin-left: -100px;
    /* margin-top: -50px; */
    transform: translate(-100px,-50px);
}


div{
    position: absolute;
    /* position: fiexd; */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

4.弹性居中

父级设置属性display：flex        子元素居中

/* 弹性绝对居中 */
div{
        display: flex;
        /* 左右居中 */
        justify-content: center;
        /* 上下居中 */
        align-items: center;
}