css垂直居中

Posted 2020-07-11

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

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

1、vertical-align:middle

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

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

2、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;//子元素垂直居中

 

文章仅作为自己的项目总结，叙述的比较简单，如有错误，还望指正。