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完成水平垂直居中。
一、定位
1.首先将html、body高度设为100%，清除默认的margin、padding值。
2.设置盒子margin值为0 auto,实现水平居中。
3.开启盒子的相对定位，将其下移父元素的50%。
4.若已知盒子高度，可通过margin-top属性将其上移自身高度的一半。
5.若不知道盒子高度，可通过CSS3新增的transform属性将其上移自身的50%。
二、flex布局
1.
<!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
