成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css實現(xiàn)元素水平垂直居中

ninefive / 2477人閱讀

摘要：結(jié)構(gòu)如下實驗結(jié)果如下實現(xiàn)了子元素的水平垂直居中，同時可觀察到兩張圖溢出的方式不同絕對定位的溢出或或的溢出

1.絕對定位，利用負邊距

利用負邊距實現(xiàn)子元素居中(相對于父元素(position:relative))，需已知子元素的width與height；且把子元素的position設(shè)為absolute，絕對定位；以及設(shè)置left和top為50%；再加上負邊距，margin-left值為width的一半，同樣的，margin-top值為height的一半。

我們來理解一下，絕對定位的子元素，通過自身的邊界來相對于父元素進行定位，這個邊界就是margin，當(dāng)我們設(shè)置了left和top各為50%時，子元素左邊界距父元素左邊界50%,上邊界距父元素上邊界50%，其實此時，我們可以知道，子元素的左上角這個點，是水平垂直居中的，當(dāng)我們設(shè)了負邊距時，我們可以理解為這個子元素向右向上各移了自身長度的一半，這就達到了水平垂直居中。當(dāng)然我們也可以這么理解，其實真正相對于父元素來定位的點就是子元素左上角的點，當(dāng)我們設(shè)了負邊距，子元素的中心點就取代了它左上角的點，若希望子元素能水平垂直居中，這時只需再設(shè)left和top各為50%時便可。
代碼如下：

2.絕對定位，margin:auto

使用絕對定位方式, 以及l(fā)eft:0;right:0;top:0;bottom:0;margin:auto

當(dāng)我們?yōu)樽釉卦O(shè)置left:0;right:0;top:0;bottom:0;時，瀏覽器將給子元素重新分配一個邊界框，此時子元素將填充其父元素的所有可用空間，當(dāng)我們給子元素設(shè)置一個width或height，防止子元素占據(jù)所有的可用空間，瀏覽器將根據(jù)新的邊界框重新計算，再加上margin:auto,由于被絕對定位，脫離了正常的文檔流，瀏覽器會給margin-left,margin-right相同的值，margin-top,margin-bottom相同的值，使元素塊在父元素中水平垂直居中。
代碼如下:

3.Flex

Flex布局即為彈性布局，只需將父元素設(shè)置三個屬性即可(display,justify-content,align-items)
代碼如下：

4.Transform

CSS3中新增的transform屬性, 代碼如下：

5.Table

模擬表格效果:

總結(jié)

1.利用負邊距方法優(yōu)點是具有良好的跨瀏覽器特性，兼容IE6/IE7，但是缺點是不能自適應(yīng)，需設(shè)置子元素的寬高，不支持百分比，且負邊距值與padding和是否定義box-sizing: border-box有關(guān)，計算需要根據(jù)不同情況。

2.利用margin:auto方法支持跨瀏覽器，支持百分比，但是必須聲明子元素的width或height(至少一項，不然會占據(jù)父元素所有空間)。

這兩種絕對定位方法，可在子元素中，設(shè)置overflow:auto來防止內(nèi)容越界溢出。

3.利用flex或transform方法的好處是代碼量少，且你不用設(shè)置子元素的width與height,內(nèi)容可由子元素里的子元素任意撐開，優(yōu)雅地溢出。但flex IE8/IE9不支持，transform IE8不支持，且屬性需要寫瀏覽器廠商前綴。

4.table方法的好處是沒有空間的限制，可以根據(jù)元素內(nèi)容動態(tài)的改變高度，素的內(nèi)容不會因為沒足夠的空間而被切斷或者出現(xiàn)難看的滾動條。但在IE6-7下無法正常運行，結(jié)構(gòu)也更復(fù)雜。

5.html結(jié)構(gòu)如下:

6.實驗結(jié)果如下：(實現(xiàn)了子元素的水平垂直居中，同時可觀察到兩張圖溢出的方式不同)
絕對定位的溢出(overflow:auto)：

flex或transform或table的溢出：

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112696.html

相關(guān)文章

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實現(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 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

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

    csRyan 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

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

    Simon 評論0 收藏0

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實現(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 評論0 收藏0

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實現(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 評論0 收藏0

  • 如何居中一個元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級元素上設(shè)置，達到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請猛戳Github個人博客 一、水平居中 1.行內(nèi)元素水平居...

    Hydrogen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<