1、表格实现

父级{display:table;}子级{display:table-cell;vertical-align:middle;}

display:table- cell属性类似于td标签。会受一些css属性破坏：float,position:absolute;display与这些样式同用会失去效果。而且table-cell对margin无反应。 

2、inline-block设置垂直居中

<style>  html,body{height:100%;}  .wrapper{height:100%;}  /* 在content容器之前构造一个空内容的inline-block，让空内容行内上下对齐 */  .wrapper:before{content:"";display:inline-block;height:100%;vertical-align: middle;}  .content{width:98%;display:inline-block;vertical-align: middle;}</style><div >  <div >content</div></div>

 

3、flex布局实现居中

{ display: flex; justify-content: center; /* 水平居中 */ align-items: center;  /* 垂直居中 */}

 

4、居中定位

.center { position: absolute; top: 50%; left: 50%; width:50%; height: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

 

原标题：元素垂直居中

关键词：