css垂直居中

从事前端工做已经一年半了，可是感受自身进步的速度有点慢，遂决定经过记录的方式来督促本身学习。

在工做中常常会遇到须要元素垂直居中的问题，经过在网上寻找答案，总结一下解决方法：

一、vertical-align:middle

　　vertical-align只对行内元素起做用，关于vertical-align的详细说明可参考：http://www.zhangxinxu.com/wordpress/?p=813

　　这个属性我通常用于图片和文字之间的对齐方式

二、line-height

　　一般适用于文字的且固定高度的垂直居中，例如：

　　<p>我是一段测试文字</p>

　　给p设置样式：p { background-color:#f00; height: 30px;}

　　结果如图：

　　给p增长一个属性  line-height:30px; 结果如图：

3.经过position:absolute

　　适用于固定高度的元素

　　将内层元素设置为绝对定位，例如: 内层子元素须要垂直居中，宽度100，高度为100px,设置top:50%,margin-top:-50px;  水平居中同理:left:50%；margin-left:-50px;

4.使用css3属性:transform:translate()

　　适用于不定宽高的居中

　　position:absolute; top:50%; left:50%; transform:translate(-50%，-50%); -webkit-transform:translate(-50%，-50%); -moz-transform:translate(-50%，-50%);

5.display:flex

　　设置父元素的display:flex; display: -webkit-flex; display: -moz-flex; justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中

 

文章仅做为本身的项目总结，叙述的比较简单，若有错误，还望指正。