块、行内块水平垂直居中

1.定位实现水平垂直居中

        
定位实现水平垂直居中
    

2.定位+位移

        
定位+位移
    

3.相对于整个视口水平垂直居中

 
相对于整个视口水平垂直居中
    

4.遮挡层

/* 遮挡层 */
       .item {
             background-image: repeating-linear-gradient(red 200px, yellow 500px, green 700px);
            opacity: 0.5;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0; 
       }