1、针对单行文本，可使用line-height=height实现垂直居中,添加text-align:center可以实现水平居中。
缺点：只使用于单行文本。
2、无高度限制时可以设定padding-top=padding-bottom实现居中。
3、固定高度定位和无固定高度定位都可以通过设定top left 或者bottom right等将元素距离父组件左上或右下50%的距离，此时与垂直水平居中相比多移动了半个子元素的宽和高，通过margin-top=-50%子元素height（垂直居中），margin-left=-50%子元素宽度width;或者通过transform：translate（-50%，-50%）向上 向左移动子元素宽高的50%。
优点：代码量少，浏览器兼容性高，支持ie6 ie7.
缺点：不支持响应式
4、dispaly:table、table-cell,vertical-align:middle利用表格属性，使单元格内容中间与所在行中间对齐。display:table-cell让标签元素以单元格形式呈现，列斯td标签。
优点：支持任意内容的可变高度，支持响应式布局。
缺点：ie8以上版本
5、利用display:flex弹性盒子布局，参考css flex布局即可。
示例
image.png
<style>
.v-middle {
height: 50px;
line-height: 50px;
text-align: center;
background-color: blue;
border: 1px solid yellow;
width: auto;
}
.v-middle1 {
margin-top: 20px;
padding-top: 30px;
padding-bottom: 30px;
background-color: blue;
border: 1px solid yellow;
text-align: center;
line-height: 60px;
/* height: 60px; 调整高度用line-height ,height: 无法垂直居中; */
}
.v-middle2 {
height: 100px;
width: 100px;
position: absolute;
top: 50%;
background-color: red;
left: 50%;
margin-top: -50px;
margin-left: -50px;
/* transform: translate(-50%, -50%);无论宽高是否固定，都可以用此属性设定居中，宽 高固定是相当于margin-top: -50px;margin-left: -50px; */
}
</style>
<body style="display: inline-flex;">
<div id="demo" style="height:500px;width:500px;border:1px solid red;position: relative;">
<div class="v-middle">你好,单行文本居中,line-height=height</div>
<div class="v-middle1">你好1,单行文本居中,padding-top=padding-bottom</div>
<div class="v-middle2">你好2,div块居中,position=absolute</div>
</div>
<div style="height: 300px;width: 300px;border: 1px solid red ;display: table;margin-left: 10px;text-align: center;">
<div style="display: table-cell;vertical-align: middle;border:1px solid yellow">
<div>表格居中table table-cell</div>
</div>
<div style="display: table-cell;vertical-align: middle;border:1px solid blue">
<div>表格居中table table-cell</div>
</div>
</div>
</body>
