0.display: flex;
父级 display: flex;text-align: center;
子标签 margin: auto;
1. display: flex;
justify-content: center;
align-items: center;
2：display: -webkit-box; （父级标签里添加）
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center
3.display: table-cell; vertical-align:middle;
此元素会作为一个表格单元格显示 ,,,,,,把此元素放置在父元素的中部(还有 vertical-align:sub; 垂直对齐文本的下标。)
1.个块级标签包行内标签
父级标签样式 ,淡然还是要设置宽高的，不然怎么体现出来 垂直居中
display: table-cell;
vertical-align: middle;
text-align: center;
2.个块级标签包行块级元素（块级元素设置了宽高）
上面的代码就不够了， 里面的块级元素 要加上 margin: 0 auto; 看图大家应该都明白了
4.绝对定位和负边距
父标签加上 position:relative;
子标签
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
其实就是先用margin移出（父级）身长，高的一半，在用定位
5.绝对定位和0
父标签加上 position:relative;
子标签
width: 139px;
height: 139px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
通过margin:auto 和 top,left,right,bottom都设置为0实现居中
6.translate (不常用)
父标签加上 position:relative;
子标签
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
写代码当然是越简单越少，所以上面由简单到复杂 往下写的
