水平居中
行级元素：为该行级元素的父元素设置text-align:center样式
<div style="width: 500px;height: 100px;border: 1px solid green;text-align:center;"><span>行级元素</span></div>
块级元素：为其自身设置margin:auto样式
<div style="width: 500px;height: 100px;border: 1px solid red;"><div style="margin:auto;width: 100px;height: 100px;border: 1px solid gold">块级元素</div></div>
垂直居中
1.display:table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符.
display:table-cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
<div style="display: table;width: 500px;height: 200px;border: 1px solid red;"><div style="display: table-cell;vertical-align: middle;text-align:center;">块级元素</div></div>
2.利用flex布局使内部块级元素水平，垂直居中
display:flex;justify-content: center; align-items:center;
<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px "><div style="width: 100px;height: 100px;border: 1px solid gold">块级元素</div></div>
3.利用定位实现
父元素：position:relative;
子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;"><div style="position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素</div></div>
