CSS：
重点：父容器高度和子元素line-height一样的数值，内容中的行内元素就会垂直居中。
HTML：
CSS：
重点：给父元素添加一个伪元素::before，让这个伪元素的div高度为100%，这样其他div就可垂直居中了，但div 本身就是块级元素，而vertical-align是行内元素属性，则需要修改为inline-block。
HTML：
CSS：
重点：在父元素中设置相对定位position: relative，子元素设置绝对定位 position: absolute；top和left相对父元素的50%，与其搭配的 transformse: translate(-50% , -50%)表示X轴和Y轴方向水平居中。
HTML：
CSS：
重点：子元素绝对定位position:absolute,父元素相对定位position: relative，将上下左右的数值都设置为0，同时margin:auto。绝对定位是会脱离文档流的，这点要注意一下。
HTML：
CSS：
重点：给父元素设置display: flex布局，水平居中 justify-content: center，垂直居中align-items: center。
HTML：
CSS：
重点：父元素position定位为relative，子元素position定位为absolute。水平居中同理。calc居中要减多少要结合到自己的宽高设置多少再进行计算。
HTML：
CSS：
重点：将父元素设置display:table，子元素table-cell会自动撑满父元素。组合 display: table-cell、vertical-align: middle、text-align: center完成水平垂直居中。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
div{
width:100px
height:100px
background:green
position:absolute
top:50%
margin-top:-50px
left:50%
margin-left:-50px
}
</style>
</head>
<body>
<div></div>
</body>
</html>
垂直和水平居中，只要垂直居中的话css最后两行可以不要，如果要相对父级盒子垂直居中的话，给父级盒子设置position:relative
举个例子<div style="width: 200pxheight: 200pxbackground: bluemargin: 0 auto"></div>
这一行直接放到body里边，他肯定是居中的。
flex居中:
<div style="display: flexjustify-content:center">
<div style="width: 200pxheight="200pxbackground: red"></div>
</div>
这个也能实现居中，当然也可以垂直居中，垂直的话display: flex后面加上flex-direction: column就可以了。
这里的分号是分隔符，最后一个样式可以不加，但只要后面有其他样式就必须要加分号，不然样式会失效。
