居中大法

水平居中：（前提父元素为块级元素，父元素宽度设定）

• 子元素为块级元素且宽度没有设定，子元素自动铺满父元素宽度

• 子元素是行内元素且宽度由其内容撑开，父元素text-align:center;

• 子元素是块级元素且宽度已经设定，子元素margin：0 auto

• 子元素是块级元素且宽度已经设定，父相子爵+子元素left: 50%；transform:trarnslateX(-50%)

• 子元素是块级元素且宽度已经设定，父元素display：flex; justify-content:center

垂直居中：（前提父元素为盒子容器）

• 子元素为行内元素：1.单行: 设定父元素的line-height为父元素高度 2.多行：父元素vertical-align:middle，-> 父元素display：inline/table-cell
• 子元素为块级元素高度未知，父元素display:flex; flex-direction:column; justify-content: center 
• 子元素为块级元素高度未知，父想子爵+子元素top：50%；transform: translateY(-50%)

垂直水平居中：

• 父相子爵，子元素left:50%;top:50%;transform:translate(-50%,-50%)
• 弹性布局，display：flex; justify-content: center; align-items: center;