水平居中、垂直居中的几种方法

 水平居中的方法：

    若是针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素

父元素设置 text-align:center;

绝对定位；弹性布局；grid网格布局

     不定宽块状元素

设置 margin：auto;

绝对定位；弹性布局；grid网格布局；table表布局

grid网格布局：

​​阮一峰 CSS Grid 网格布局教程：

CSS Grid 网格布局教程 - 阮一峰的网络日志

.farther {display: grid;justify-content: center;}

table表布局: 

.father {display: table;
}.children {display: table-cell;text-align: center; 
}

垂直居中的方法：          

      若为单行内联(inline-)元素：

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中；

绝对定位；弹性布局；table表布局；grid网格布局

      不定宽块状元素：

绝对定位；弹性布局；table表布局；grid网格布局

grid网格布局：

.farther {display: grid;justify-content: center;align-content: center;}

table表布局:

.father {display: table;
}.children {display: table-cell;vertical-align: middle;text-align: center; 
}