将框水平垂直居中的10种方法
HTML代码
第一个是绝对对位方式，absolute负边距
首先，知道子要素宽度的高低，子要素中top:50%； 左： 50 %，
但是，绝对的位置是基于子要素的左上角，希望子要素的中心显示在中央。 如果使用外部页边距的负值，则负外部页边距会将元素放置在相反的方向上。
通过将子元素外部的边距指定为子元素宽度一半的负值，可以使子元素居中
#container {
定位：关系；
width: 600px；
height: 500px；
border: 1px solid #000；
边距：自动；
}
#box {
定位：助手；
width: 200px；
height: 200px；
left: 50%；
top: 50%；
margin: -100px -100px；
background-color: #0ff；
}
优点：简单易懂，兼容性强
缺点：需要知道子元素的宽度和高度
第二，也是基于绝对定位的absolute margin auto
这需要所有方向的距离为0，边距为自动； 好的
优点：互换性也很好
缺点：需要知道子元素的宽度和高度
第三个是absolute calc (计算)
这种方法的top比例基于元素的左上角，所以减去一半的宽度和高度就可以了
可以使用calc ()函数计算calc:的任意长度值。
calc ) )函数使用标准数学运算优先级规则；
支持“”、“-”、“*”和“/”运算
优点：他的兼容性取决于calc的兼容性
缺点：同样需要知道子元素的宽度和高度
第四个是absolute transform (迁移)
此方法不需要子元素的固定宽度和高度
也可以使用新的css3 transform transform translate来修复绝对位置问题
属性还可以设置自己的宽度和高度的百分比，因此可以将translate设置为-50%以使其居中
#container {
定位：关系；
width: 600px；
height: 600px；
border: 1px solid #000；
边距：自动；
}
#box {
定位：关系；
top: 50%；
left: 50%；
width: 200px；
height: 200px；
transform:translate(-50%、-50%；
- WebKit-transform 3360 translate (-50 %、-50%；
- ms-transform 3360 translate (-50 %、-50%；
- moz-transform 3360 translate (-50 %、-50%；
background-color: #0ff；
}
优点：代码量少
缺点：不支持IE8。 必须为属性添加浏览器供应商前缀，这可能会干扰其他transform效果，并且在某些情况下会导致文本和元素边界的渲染不明确。
第五个：行高度
只对文本有效，对决定宽度和高度的div没有用。 所以，在将文本水平、垂直地居中时使用。
优点：代码简洁
缺点：只对文本有效，只对单行文本有效，不能有多行文本
第七种：表格式
以制表符单元格格式设置
优点： tabel单元格的内容自然垂直居中。 添加水平居中对齐属性即可
缺点：这不是table的正确方法，不太推荐，但可以实现
第八种：表小区实现水平垂直中央：表小区中间中心配套使用
直接设定为父母
#container {
显示：表单元格；
vertical-align :中间；
文本照明3360中心；
width: 240px；
height: 180px；
border:1px solid #666；
}
第九：弹性盒方式
#container {
width: 600px；
height: 600px；
border: 1px solid #000；
显示： flex
内容：中心；
align-items3360中心；
}
优点：移动端易用性
缺点： pc端需要根据兼容性进行判定
第十个：网格(网格布局)
在父母中设置display:grid；
子元素为align-self: center； justify-self:中心；
优点：代码量少
缺点：与flex相比不兼容，建议使用flex