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

简介: 利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。而撸起垂直居中,相信于大多初撸者来说,与我相似,内心是抗拒的。

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

原文首链:CSS实现水平|垂直居中漫谈

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


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

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

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

倾城之链 | NICE LINKS DJI Mavic Air
目录
相关文章
|
6月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
2月前
|
前端开发
css水平、垂直居中的写法
css水平、垂直居中的写法
56 2
|
4月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
244 3
|
5月前
|
前端开发 UED
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
124 5
|
4月前
|
前端开发
css实用技巧——绝对定位元素的水平垂直居中
css实用技巧——绝对定位元素的水平垂直居中
49 2
|
4月前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
101 2
|
4月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
2300 1
|
4月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
79 0
|
4月前
|
前端开发 C++ 容器
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
47 0
|
6月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
59 1