元素垂直水平居中

HTML

Css

1. 元素具有固定的宽高

1.1 使用绝对定位和负边距

    .parent {
        position: relative;
        
        .child {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    }
    
1.2 绝对定位和margin： 无需知道元素的宽高

    .parent {
        position: relative;
    
        .child {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }

2. 未知高度和宽度的元素

2.1 元素为inline 或者inline-block 属性

    .parent {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        .child {
            display: inline-block; 
        }
    }

2.2 Css 3 的transform属性

translate：设置元素在X轴，Y轴上正方向的平移变换

.parent {
    position: relative;
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); // 相对自己往左往上平移50%的距离
   } 
}

2.3 flex 布局

.parent {
    display: flex;
    display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀
    flex-direction: row;
    align-items: center;
    justify-content: center;
}   

或者

.parent {
    display: flex;
    .child {
        margin: 0;
   } 
} 

2.4 Gird 布局

但是Grid 更适合在两个维度（包括行和列）中创建整个栅格化布局

.parent {
    display: grid;
    .child {
        justify-self: center;
        align-self: center;
   } 
}  

2.5 伪元素辅助布局

.parent {
   text-align: center;
   &::before {
       content: ''
       height: 100%;
       display: inline-block;
       vertical-align: middle;
   }
    .child {
      display: inline-block;
      vertical-align: middle;
   } 
}

注意

Grid 和 Flex 都有浏览器兼容性问题