css實現元素水平垂直居中

ninefive 發布于2019-08-29 13:46 / 2462人閱讀

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

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

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

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

2.絕對定位，margin:auto

使用絕對定位方式, 以及left:0;right:0;top:0;bottom:0;margin:auto

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

3.Flex

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

4.Transform

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

5.Table

模擬表格效果:

總結

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

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

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

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

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

5.html結構如下:

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

flex或transform或table的溢出：

GPU云服務器云服務器水平垂直居中實現垂直居中垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112696.html

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

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

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

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

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

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

Simon 2019-08-01 18:31 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

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

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

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

mayaohua 2019-08-29 18:44 評論0 收藏0
如何居中一個元素（終結版）

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

Hydrogen 2019-08-29 16:56 評論0 收藏0