面试的时候经常会被问到这样一个题目：让一个元素中内容垂直居中怎么做。其实之前，我就会两种，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%);
}
转自：http://blog.csdn.net/xiaozhuxmen/article
面试的时候经常会被问到这样一个题目：让一个元素中内容垂直居中怎么做。其实之前，我就会两种，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%);
}