css中 水平垂直居中 常用几种方法

 ##如何居中一个元素
        1.已知居中元素的宽高
            .center {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -9rem;
                margin-top: -5rem;
            }
            或
            .center {
                position: absolute;
                top: calc(50% - 5em);
                left: calc(50% - 9em);
            }
        2.居中元素的宽高不定
            .center {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        3.使用flex布局
            .wrapper{
                display:flex;
            }
            .center{
                margin:auto;
            }
            或者 flex布局 父元素指定子元素居中
            .wrapper{
                display:flex;
                align-items:center;
                justify-content:center;
            }
        4.在浏览器窗口中居中
        基于视口的垂直居中。不要求原生有固定的宽高，但是这种居中是在整个页面窗口内居中，不是基于父元素
            .center{
                margin: 50vh auto;
                transform: translateY(-50%);
            }