css垂直居中的几种方法,css中垂直居中

面试的时候经常会被问到这样一个题目：让一个元素中内容垂直居中怎么做。其实之前，我就会两种，line-height和table-cell，今天做项目，遇到了这个问题，就系统的查了一下，总结一下方法：
1、line-height

div{ height: 100px; line-height:100px; text-align:center;}

这样就能让div中的文字水平垂直居中了

2、display:table-cell

table-cell这个属性是在看head first 书的时候学习的，通过display 设置为table table-row table-cell，让元素以表格的样子显示。

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

3、CSS3的flex布局

div{ /*设置为伸缩容器*/ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /*水平居中*/ -webkit-box-pack: center;/*旧版本*/ -moz-box-pack: center;/*旧版本*/ -ms-flex-pack:center;/*混合版本*/ -webkit-justify-content:center;/*新版本*/ justify-content: center;/*新版本*/ /*垂直居中*/ -webkit-box-align: center;/*旧版本*/ -moz-box-align: center;/*旧版本*/ -ms-flex-align: center;/*混合版本*/ -webkit-align-items: center;/*新版本*/ align-items: center;/*新版本*/}

4、使用padding，这需要知道确定的高度
5、CSS3的transform来实现

.center-vertical{ position: relative; top:50%; transform:translateY(-50%);}.center-horizontal{ position: relative; left:50%; transform:translateX(-50%); }

前4种我都做过了是好用的，第5种没有仔细研究过，等明天详细学习CSS动画时再试。