块元素水平居中： 效果：
html结构如下：（子元素在父容器内居中）
margin:auto
flex布局
子元素绝对定位时的水平居中对齐1：（最近一层父容器必须使用包含块定位,position: relative/fixed/absolute） left + margin-left负值
子元素绝对定位时的水平居中对齐2：（最近一层父容器必须使用包含块定位,position: relative/fixed/absolute） transform: translateX(-50%)或者translateX(-50%*子元素宽度px)
块元素垂直居中: html结构同水平居中一样，效果：
top + margin-top负值（子元素position:absolute）
top + transform:translateY(-50%) / translateY(-50%*子元素高度)
flex布局：默认主轴为X轴，align-items: center
块元素的水平且垂直居中：
效果：
flex布局
块元素position:absolute实现水平垂直居中1: top: 50%; left: 50%; transform: translate(-50%, -50%);
块元素position:absolute实现水平垂直居中2:
内联子元素水平居中: text-align: center 效果：
内联子元素垂直居中： line-height: 父元素高度 效果：
