第一种：position定位和margin负值法

注意：此方法内部水平居中元素必须有宽高，否则margin负值无法计算

第二种：position定位和transform法

注意：此方法内部元素无需知道宽高即可实现水平垂直居中

第三种：position定位和inset:0,margin:auto法

注意：此方法内部元素宽高必须设置，否则会铺满整个外部元素，实现代码简洁

第四种：flexbox布局法

注意：此方法内部元素无需知道宽高即可实现水平垂直居中

第五种：grid布局法

注意：此方法内部元素无需知道宽高即可实现水平垂直居中

第六种：position定位top: 0;left: 0;right: 0;bottom: 0;和margin:auto法

注意：此方法内部水平居中元素必须有宽高，否则内部元素会铺满整个外部元素，实现代码简洁

第七种：表格布局，display:table-cell和vertical-align:middle法

第八种：flexbox布局法+margin:auto

注意：此方法内部元素无需知道宽高即可实现水平垂直居中