常用元素水平垂直居中方案

hiyang 發(fā)布于2019-08-30 15:44 / 1312人閱讀

摘要：實(shí)現(xiàn)水平垂直居中適用場(chǎng)景父子寬高都可未知比較推薦這種方式，簡(jiǎn)單，而且目前兼容性也不錯(cuò)。絕對(duì)定位加上負(fù)適用場(chǎng)景父元素寬高已知未知都行，但是首先得有寬高。

flex實(shí)現(xiàn)水平垂直居中

適用場(chǎng)景：父子寬高都可未知(比較推薦這種方式，簡(jiǎn)單，而且目前兼容性也不錯(cuò)。)

絕對(duì)定位加上負(fù)margin

適用場(chǎng)景：父元素寬高已知未知都行，但是首先得有寬高。其次子元素的寬高必須已知，因?yàn)樾枰O(shè)置子元素的負(fù)margin. (也可以將負(fù)margin設(shè)置成translate來(lái)做位移實(shí)現(xiàn))

絕對(duì)定位 + auto margin

適用場(chǎng)景：父子元素寬高都未知的情況(該方式不需要明確知道子元素寬高，子元素寬高可用百分比，對(duì)于子元素寬高不確定需要居中的情況比較適合。)

網(wǎng)格布局

適用場(chǎng)景：父子元素寬高未知，兼容性不大好

Table-cell + text-align + vertical-align

適用場(chǎng)景: 父元素大小已知（非百分比高度），子元素大小未知，但子元素須為行內(nèi)塊元素，較好的兼容性

偽元素

適用場(chǎng)景：父子寬高都可未知，子元素需為行內(nèi)塊元素(這種方式其實(shí)就是使用偽元素的高度為100%，子元素和偽元素都設(shè)置 vertical-align: middle實(shí)現(xiàn)垂直居中的效果)

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

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

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

相關(guān)文章

css垂直水平居中解決方案

摘要：寫在前面垂直水平居中即垂直與水平方向上都要居中，也就是視覺(jué)效果中的，處于視圖的正中間。我們把需要垂直水平居中的設(shè)置為。使用使塊級(jí)元素垂直居中是很簡(jiǎn)單的。寫在前面：垂直水平居中即垂直與水平方向上都要居中，也就是視覺(jué)效果中的，處于視圖的正中間。下面，我們來(lái)講講幾個(gè)css中常用的垂直水平居中的解決方案方法1: 1、把外層的div的顯示方式設(shè)置為table，即display: table...

taoszu 2019-08-29 14:18 評(píng)論0 收藏0
水平垂直居中

摘要：筆記整理之一水平垂直居中固定寬高一般使用負(fù)值進(jìn)行居中不固定寬高一般使用和進(jìn)行下面三種方案平常都很少被使用的到移動(dòng)端一般使用方案在移動(dòng)端都可以使用文本水平垂直居中文本垂直文本垂直居中移動(dòng)端水平垂直居中垂直居中方案快級(jí)元素筆記整理之一：水平垂直居中 PC固定寬高、一般使用maring負(fù)值進(jìn)行居中PC不固定寬高、一般使用relative和left進(jìn)行下面三種方案平常都很少被使用的到 ...

incredible 2019-08-30 12:43 評(píng)論0 收藏0
水平垂直居中

摘要：筆記整理之一水平垂直居中固定寬高一般使用負(fù)值進(jìn)行居中不固定寬高一般使用和進(jìn)行下面三種方案平常都很少被使用的到移動(dòng)端一般使用方案在移動(dòng)端都可以使用文本水平垂直居中文本垂直文本垂直居中移動(dòng)端水平垂直居中垂直居中方案快級(jí)元素筆記整理之一：水平垂直居中 PC固定寬高、一般使用maring負(fù)值進(jìn)行居中PC不固定寬高、一般使用relative和left進(jìn)行下面三種方案平常都很少被使用的到 ...

eechen 2019-08-01 14:54 評(píng)論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過(guò)哪幾種？

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

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

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

mayaohua 2019-08-29 18:44 評(píng)論0 收藏0