css垂直居中
2016-05-23 18:37
453 查看
从事前端工作已经一年半了,但是感觉自身进步的速度有点慢,遂决定通过记录的方式来督促自己学习。
在工作中经常会遇到需要元素垂直居中的问题,通过在网上寻找答案,总结一下解决方法:
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;//子元素垂直居中
文章仅作为自己的项目总结,叙述的比较简单,如有错误,还望指正。
在工作中经常会遇到需要元素垂直居中的问题,通过在网上寻找答案,总结一下解决方法:
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;//子元素垂直居中
文章仅作为自己的项目总结,叙述的比较简单,如有错误,还望指正。
相关文章推荐
- DatePicker在studio中样式改变,显示年月,隐藏日的时候同时出现崩溃
- CSS3和HTML问题集锦
- 深入理解 CSS 中的行高与基线
- OOCSS——核心篇
- OOCSS——概念篇
- 深入理解CSS伪类
- Flexbox布局(3)
- 9.css背景
- 在less中使用css3 calc 的问题
- css hack
- 从网址上获取json并生成样式
- CSS设置背景色渐变显示
- 8.css边框
- CSS 之 控制图片与文字对齐
- css 中的相对定位和绝对定位
- css之!important最高优先级
- 键盘 - 键盘样式风格有关设置
- 【CSS】——三大基础选择器以及优先级
- css 默认
- SearchView 属性样式