1.元素垂直水平居中

 .parent{
        position: relative;
            .child{
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
       }
    }

兼容低版本ie浏览器写法
transform属性目前支持的浏览器 Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+；

 .parent{
        position: relative;
            .child{
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
       }
    }