首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS实现水平|垂直居中漫谈

CSS实现水平|垂直居中漫谈

作者头像
晚晴幽草轩轩主
发布2018-03-27 15:51:35
1.2K0
发布2018-03-27 15:51:35
举报
文章被收录于专栏:静晴轩静晴轩

利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。而撸起垂直居中,相信于大多初撸者来说,与我相似,内心是抗拒的。于此,以我司同事一内部分享为基,加以搜集完善,得8种CSS垂直居中书写之法;个中有示例Demo,以及代码和优劣之评。

PS:窃以为,对于CSS足够熟悉的话,以CSS多种属性组合出的“奇技淫巧”想必是层次不穷的,这里也只是搜集整理了其中为大家常用而又简洁的部分而已。


注解: 好吧,周末被“加班”了耶,搞搞需求整整Blog还算闲适;在写居中示例时,搜肠刮肚没什么适宜之词,便逼的自己“什兴大发“,特胡驺几句自黑乱言,填充内容,耶聊以慰籍;贴之于下,祈与同道者共嗨 ?。

    周末把码黄昏后,有咸香盈袖。
    莫道不消魂,独弄键盘,人比黄花瘦。
    真可谓:天堂有路你不走,学海无涯苦作舟。
    到头来:码山有路勤为径?三十功名尘与土。
    饶上个:一入'哀啼'深似海,从此'逍遥'没长'苏'。

–更新于2015-11-25 之后在CodePen有看到一文将绝对居中阐述的更为全面,链接如下: http://codepen.io/shshaw/full/gEiDt

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-11-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档