CSS實(shí)現(xiàn)水平|垂直居中漫談

孫吉亮發(fā)布于2019-08-28 18:29 / 589人閱讀

摘要：原文首鏈實(shí)現(xiàn)水平垂直居中漫談利用進(jìn)行元素的水平居中，比較簡單，手到擒來行級元素設(shè)置其父元素的，塊級元素設(shè)置其本身的和為即可。

原文首鏈：CSS實(shí)現(xiàn)水平|垂直居中漫談

利用CSS進(jìn)行元素的水平居中，比較簡單，手到擒來：行級元素設(shè)置其父元素的text-align center，塊級元素設(shè)置其本身的left 和 right margins為auto即可。而擼起垂直居中，相信于大多初擼者來說，與我相似，內(nèi)心是抗拒的。于此，以我司同事一內(nèi)部分享為基，加以搜集完善，得8種CSS垂直居中書寫之法；個中有示例Demo，以及代碼和優(yōu)劣之評。

CSS實(shí)現(xiàn)水平居中(3法)

CSS實(shí)現(xiàn)垂直居中(8法)

CSS文本垂直居中(5法)[Update: 2016-01-06]

PS：竊以為，對于CSS足夠熟悉的話，以CSS多種屬性組合出的“奇技淫巧”想必是層次不窮的，這里也只是搜集整理了其中為大家常用而又簡潔的部分而已。

注解: 好吧，周末被“加班”了耶，搞搞需求整整Blog還算閑適；在寫居中示例時，搜腸刮肚沒什么適宜之詞，便逼的自己“什興大發(fā)“，特胡騶幾句自黑亂言，填充內(nèi)容，耶聊以慰籍；貼之于下，祈與同道者共嗨 ?。

周末把碼黃昏后，有咸香盈袖。
莫道不消魂，獨(dú)弄鍵盤，人比黃花瘦。
真可謂：天堂有路你不走，學(xué)海無涯苦作舟。
到頭來：碼山有路勤為徑？三十功名塵與土。
饒上個：一入"哀啼"深似海，從此"逍遙"沒長"蘇"。

PS: 更新于2015-11-25 之后在CodePen有看到一文將絕對居中闡述的更為全面，鏈接如下：http://codepen.io/shshaw/full/gEiDt

云服務(wù)器 GPU云服務(wù)器水平垂直居中實(shí)現(xiàn)垂直居中垂直居中文字垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111266.html

相關(guān)文章

沒有flexbox彈性盒子，但我們還有table

摘要：結(jié)構(gòu)左基線向左移動右基線向右移動一定要使用屬性自己不熟悉的自行主要是為了好設(shè)置寬度都是相對于父元素的即將父元素平均分成了等份。由于項(xiàng)目要兼容到IE9，因此將之前flex布局全部給換掉。今天leader讓我看了kitecss這個css框架(里面的一些布局方式能比較好的兼容IE8+，里面有一些比較好的柵格布局，垂直居中等方案)。然后具體的學(xué)習(xí)了里面的一些css技巧和方法，總結(jié)如下： gi...

KunMinX 2019-08-28 18:22 評論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

mayaohua 2019-08-29 18:44 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設(shè)置這個父級元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0