CSS：元素水平与垂直居中的几种方法

一、当元素的宽度和高度确定时

• 利用绝对定位，将元素的top和left属性都设为50%，再利用margin负边距(这里的数值是父元素的一半)达到垂直居中的效果。

    #father {
        position: relative;
    }
    
    #children {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
    }

二、当元素的宽度高度不确定时

情况一：当要被居中的元素是inline或者inline-block元素时（）

• 可以将父元素设置为display: table-cell，配合text-align: center和vertical-align: middle; 从而实现水平垂直居中。

    #father {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    
    #children {
        // 子元素不需要设置任何东西
    }

情况二：利用CSS3里面的transform属性可以在未知高宽的情况下实现元素水平垂直居中对齐(配合定位使用)，此方法和第一种方法有点类似，只不过是有没有给出元素宽高的区别。

    #father {
        position: relative;
    }
    
    #children {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); // 相对于自身走50%
    }

情况三：flex布局轻松拿捏

• 使用flex布局有一个很大的优点：不需要绝对定位，相对定位这些改变布局的操作，一样可以实现元素的水平居中对齐。

    #father {
        display: flex;
        justify-content: center; // 主轴方向居中对齐
        align-items: center; // 交叉轴方向居中对齐
    }
    
    #children {
        // 子元素不需要设置任何东西
    }