CSS篇 - 垂直水平居中

垂直水平居中 的几种实现方式

1. 最简单

// margin:0 auto;
// line-height等于height

    .outer {
        width:200px;padding:200px;
        background-color:pink;
    }
    .inner {
        width:100px;height:100px;
        margin:0 auto;line-height:100px;
        text-align:center;
        background-color: skyblue;
    } 

2. 绝对定位的几种

    /* 几种方式的公共样式 */
    .outer { position:relative;}

    /*    (1). absolute + 负margin */
    .inner {
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
        /* 需要知道inner元素的宽高 */
    }

    /*    (2). absolute + transform */
    .inner {
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        /*
        css3里translate里的%移动距离
        是盒子自身的宽度和高度来的 
        可以不知道inner元素的宽高 */
    }

    /*    (3). absolute + transform */
    .inner {
        position:absolute;
        left: calc(50% - 50px);
        top: calc(50% - 50px);
        /*
        需要inner元素的宽高
        calc()函数可以使用数字属性值来执行加、减、乘、除，四则运算 */
    }

    /*    (4). absolute + margin:auto */
    .inner {
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        /* top  bottom left right 值相等即可*/
    }
    /* 
        此时是指margin:auto;
        让css根据定位计算margin值，用hack的方式实现居中
        意味着把剩余的空间分配给 margin ，并且左右均分，
        所以就实现了水平居中，处置方向同理
    */
    /* 
        副作用：
        left:0; right:0;  相当于 width:100%;
        top:0; bottom:0;  相当于 height:100%;
        缺点：
            需要固定居中元素的宽高，否则其宽高会被设为100%。
    */

3. flex 布局的几种

/* 3.1 */
.outer {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    /* 使 子元素 垂直居中 */
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /* 使 子元素 水平居中 */
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    display:flex;
}

/* 3.2 */
.outer { display: flex; }
.inner { margin: auto; }

4. grid 布局的几种

/* 4.1 */
.outer { display:grid; }
.inner {
    justify-self: center; /* 水平居中 */
    align-self: center; /* 垂直居中 */
}

/* 4.2 */
.outer { display: grid; }
.inner { margin: auto; }