如何使用css实现垂直居中

  
    DEMO
  

其中在 class='child' 这个 div 中的内容长度是不一定的，现在需要实现这个 div 的居中。

垂直居中

1 display: table-cell

可以使高度不同的元素都垂直居中

.parent {
  display:table-cell;
  vertical-align:middle;
}

2 position: absolute

.parent {
  position:relative;
}
.child{
  position:absolute;
  top:50%;   /* 参照物是父容器 */
  transform:translateY(-50%); /*百分比的参照物是自身 */
}

3 display: flex

只兼容IE10+

.parent {
  display:flex;
  align-items:center;
}
/*或者*/
.child{
  margin：0 auto;
}

以上是“如何使用css实现垂直居中”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！