CSS垂直居中的10个方法

前言

前端开发中元素居中是最常见和最经常使用到的css技巧，不仅开发中经常会用到，面试官出题考核基础时有时候也会问道这类问题。本文主要介绍10种垂直居中的方法。希望对你我都有帮组。

1、line-height+height实现

如果子元素是行内文本元素的话，只要设置父元素的height和line-height高度一样就可以垂直居中。

HTML

"parent">     "child">我是行内元素</span> </div>

CSS

.parent {   height: 200px;   width: 200px;   line-height: 200px;   background:  #fcc; } .child {   background: #f66; }

效果图：

2、flex+align-items实现

flex布局可以实现一行或多行元素垂直居中，使用align-items：center就可以。

HTML

"parent">      "child">flex实现居中</div> </div>

CSS

.parent {   height: 200px;   width: 200px;   display: flex;   align-items: center;   background:  #fcc; } .child {   background: #f66;   width: 180px; }

效果图：

3、table-cell+vertical-align实现

利用表布局的vertical-align: middle属性可以实现子元素的垂直居中。

HTML

"parent">      "child