css垂直居中那点事_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 2266 | 回复: 0   主题: css垂直居中那点事        下一篇 
_chen
版主
等级:中校
经验:2139
发帖:39
精华:0
注册:2013-8-23
状态:离线
发送短消息息给_chen 加好友    发送短消息息给_chen 发消息
发表于: IP:您无权察看 2015-8-17 10:29:34 | [全部帖] [楼主帖] 楼主

学习css的时候经常被各种问题纠结到不要不要的,没办法,只能写写博客帮助整理一下自己的思绪和帮助一下和我遇到同样问题的小伙伴们

不知道各位学习css的小伙伴会不会被垂直居中的问题虐的好痛苦,反正我也被虐的挺惨
但是稍微整理一下,感觉好像垂直居中也就那么回事。

一,利用line-height
line-height是一个设置行高的一个css样式,一行文字上面的空白+下面的空白=行高
他可以帮助我们解决垂直居中的问题
当一个div中有1行文字(记住:是1行文字)需要垂直居中时,设置line-height=div的height可是使这一行文字垂直居中,但这个办法有点鸡肋,只能用在一行文字上,但是在文本框里面的光标解决上却很有用,现在的主流浏览器chrome,firefox,safari等等等在设置input=“text”时输入文字光标是会自动垂直居中的但是在老古董ie6,ie7,ie8上却会有问题,会变成这样:       很坑有木有???没办法这就是ie,这时我们加上line-height=文本框的height可以解决这个问题。

二,利用table

<div>   →display:table
<div>     →diaplay:table-cell           /*使这两个div模仿表格和表格单元,给vertical-align提供一个使用的环境*/


    我要垂直居中!!

 </div>
</div>


这时设置vertical-align:middle就可以生效了,(这个办法可以用于多行文字上)但是这个办法在ie上的支持不是很好

三,利用负边距
设置position:absolute→top:50%→margin-top:(-div中height的一般)
position:absolute的移动位移的中间点是在块级元素的正中间,但是移动距离的参考是父级元素(50%是父级元素的height的50%,而不是自己的50%),如果有两个div,父级div如果有设置position:absolute或者relative,那么子div就参照父级div来移动,如果父级的div没有设置position:absolute或者relative,那么就参考左上角(0.0)来进行移动。
这个办法可以使整个div垂直居中

四,利用伸缩盒(flexible-box)
伸缩盒现在有旧和新的两个版本,新版本有取代旧版本的趋势,本文使用的是旧版本的伸缩盒。(新版伸缩盒也可以实现)
利用伸缩盒解决垂直居中的问题也是一种好办法,但是在使用时需要加上-webkit-,-moz-,-ms-,-o-等前缀
我们同样需要利用display放一个box的容器:-webkit-display:box → 若文字是水平排列的使用:box-align:center  / 若文字是纵向排列的使用box-pack:center

当然,实现垂直居中还可以利用transform来实现等等,还有很多其他的办法,但是以我目前的总结,暂时总结到这4种




赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论