1、居中元素不定高
在需要居中目标的高度不定动态变化的时候，这个时候个人一般会用table标签，但是如果居中目标数量很少的话需要人为营造一个table。即 demo1>div>目标 需要包裹三层，利用table的属性vertical-align属性让其竖直居中
.demo1{ display: table; } .demo1>div{ display: table-cell; vertical-align: middle; }类似于 table>tbody>tr>td 中的元素能够自动垂直居中
2、居中元素为文本
对于纯文字的居中，只需把文字的行高调至容器高度
div{ height:30px; line-height:30px; }3、居中元素定高
这个方法多用于弹窗的居中，想要居中于父元素，需要给父元素一个relative
.wrap { position: relative; } .center { width: 100px; height: 100px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }4、手机端垂直居中
wrap { position: relative; } .center { position: absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width: 100px; height: 100px; }5、css3弹性盒子居中法，给父元素一个display：flex
.wrap { width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; } .center { }也可以直接父元素 display：flex 子元素margin：auto
附上一个写的很好的demo大家可以参考下 http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html
还有一种行内元素的居中这里有一篇写的很好http://yincheng.site/css-align
原文链接 http://www.hotmaycold.com/2017/03/07/css-居中问题/
