《小白HTML5成長之路30》怎樣讓任意塊元素基于父

《小白HTML5成長之路30》怎樣讓任意塊元素基于父容器居中

白郁悶的找到老朱說道：“朱哥，我想讓一個塊容器在一個容器里面垂直居中怎么這么難??！”

老朱：“你是怎么實現的？”

小白說：“比如一個容器的高度是400px，子容器的高度是300px，我就把子容器CSS上邊距設置成50px。”

“那要是父容器高度發生變化你的子容器豈不是很麻煩”

小白郁悶的說道：“你可說吧！頭疼的很！怎么才能輕松的設置垂直居中??？”

老朱說：“如果一個容器只有一行文字和圖片，我們可以設置容器的高度和line-height一致就可以保證文字和圖片居中，但是多行圖片，或者容器里面嵌套了其他塊元素就很麻煩了。還有一種情況就像你剛剛兩個div嵌套，子容器也是個塊元素，垂直居中直接用CSS會很麻煩，正好今天想跟你說說怎么給jQuery添加擴展方法，索性咱就以這個為例子進行討論吧！”

小白高興的說道：“又有新知識學了，什么事給jQuery添加擴展方法呢？”

“我們使用$(選擇器)生成的對象有很多默認jQuery方法，你應該知道吧？”

小白說道：“知道啊！獲取和修改容器html內容的html()方法、獲取和修改屬性的attr()方法、修改元素css樣式的css()方法、獲取元素高度的height()方法、還有控制容器顯示的show()方法……”

“停~！差不多了，這些都是jQuery自帶的方法，假如我們想自己增加一個方法可以用$.fn添加。我現在給你寫一個能夠輸出當前容器高度和父容器高度的方法你看看！”

“子容器和父容器的高度在CSS中都有過設定，因此我通過$.fn添加mid方法以后，再通過選擇器找到sun容器就可以直接使用mid方法了?！?/p>

小白突然靈光一現，說道：“朱哥我知道怎么設置一個讓塊容器基于父容器垂直居中了，你稍等我一會，我再你的代碼基礎上改一下！”

也就兩分鐘的時間，小白就把代碼拿到了老朱面前，“你看，我寫好了！”

“現在我想讓sun容器基于main垂直居中只需要使用一下$("#sun").mid()就可以實現了，以后父容器不管怎么變化，它都是基于父容器居中的。”

老朱說道：“如果有多行塊容器，或者多行文本、圖片怎么辦？”

小白說道：“那就給他們外面再嵌套一個塊容器就可以了么！對不對?。俊?/p>

“不錯，通過給他們嵌套一個塊容器，然后再讓這個塊容器基于父容器垂直居中就可以了！小白我相信你還能再寫一個基于底部對齊的方法吧？”

小白自信的說道：“再這個方法上改一下就可以了，稍等~”

“嗯，不錯，如果你發現以后經常會用到這兩種居中方式，可以把他們放到一個js文件里面，以后用的時候把這個js文件引入，就可以直接使用mid和bottom方法了?！?/p>

“$.fn確實是個好東西！看來我以后得經常添加自己的方法了，哈哈，我去練習了~”

想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！

幾天有小伙伴在我的web前端交流群里說前幾天面試一家公司，被問到垂直居中的方法，只答出了margin、table-cell、flex三種，然后就不知道了，然后問我除此之外還有哪些？，于是我整理了一下居中的方案做個記錄，希望對大家也有幫助。
如果哪里寫的不對，歡迎指正，非常感謝。

塊級元素居中 html代碼部分

<div class="parent">
 <div class="child">child</div>
</div>

行內元素居中 html代碼部分

<div class="parent">
 <span class="child">child</span>
</div>

水平居中

01 行內元素 text-align: center;

.parent {
 text-align: center;
}

02 塊級元素 margin: auto;

低版本瀏覽器還需要設置 text-align: center;

.parent {
 text-align: center; 
}
.child {
 width: 100px;
 margin: auto; 
 border: 1px solid blue;
}

由于本文主要想記錄的是垂直居中的方案，這里水平垂直的其他方案就不做過多記錄了。

垂直居中

01 行內元素（單行文字垂直居中）：設置 line-height=height

.parent {
 height: 200px;
 line-height: 200px;
 border: 1px solid red;
}

02 塊級元素：絕對定位（需要提前知道尺寸）

優點：兼容性不錯
缺點：需要提前知道尺寸，margin-top: -(高度的一半); margin-left: -(寬度的一半);

.parent {
 position: relative;
 height: 200px;
}
.child {
 width: 80px;
 height: 40px;
 background: blue;
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -20px;
 margin-left: -40px;
}

03 塊級元素：絕對定位 + transform

優點：不需要提前知道尺寸
缺點：兼容性不好

.parent {
 position: relative;
 height: 200px;
}
.child {
 width: 80px;
 height: 40px;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 background: blue;
}

04 塊級元素：絕對定位 + margin: auto;

優點：不需要提前知道尺寸，兼容性好
缺點：這個方法是我最喜歡用的一個，要說缺點的話，我目前還不知道。

此方法出自張鑫旭老師的博客小tip: margin:auto實現絕對定位元素的水平垂直居中

.parent {
 position: relative;
 height: 200px;
}
.child {
 width: 80px;
 height: 40px;
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 background: blue;
}

05 塊級元素：padding

缺點：如果高度固定，需要提前計算尺寸（只在某些特定情況適用）。

.parent {
 padding: 5% 0;
}
.child {
 padding: 10% 0;
 background: blue;
}

06 塊級元素：display: table-cell

.parent {
 width: 600px;
 height: 200px;
 border: 1px solid red;
 display: table;
}
.child {
 display: table-cell;
 vertical-align: middle;
}

或：

這個方案是在知乎看到的，原文說是淘寶團隊的方案：
用 CSS 實現元素垂直居中，有哪些好的方案？- Gino的回答 - 知乎

張鑫旭老師的博客也有提到過：

我所知道的幾種display:table-cell的應用

.parent {
 height: 300px;
 border: 1px solid red;
 display: table-cell;
 vertical-align: middle;
 /* *display: block;
 *font-size: (heightX0.873);
 *font-family: arial; */
}

同樣適用于多行文字的垂直居中處理

HTML代碼：

<div class="parent">
 <span class="child">child child child child child child child child child child child child child child child child child child child childchild child child </span>
</div>

CSS代碼：

.parent {
 width: 400px;
 height: 300px;
 display: table-cell; 
 vertical-align: middle;
 border: 1px solid red;
}
.child {
 display: inline-block;
 vertical-align: middle;
 background: blue;
}

07 塊級元素：display: flex

缺點：兼容性不好

.parent {
 width: 600px;
 height: 200px;
 border: 1px solid red;
 display: flex;
 align-items: center;
 justify-content: center; /*水平居中*/
}
.child {
 background: blue;
}

08 塊級元素：偽元素

這個方案是先從這位博主的文章中看到：
CSS：使用偽元素做水平垂直居中的微深入研究
然后發現張鑫旭老師的文章中也有提到：
:after偽類+content內容生成經典應用舉例

.parent {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 text-align: center;
}
.child {
 background: blue;
 width: 100px;
 height: 40px;
 display: inline-block;
 vertical-align: middle;
}
.parent::before {
 content: '';
 height: 100%;
 display: inline-block;
 vertical-align: middle; 
}

09 塊級元素：calc()

也是個不錯的方法。

缺點：兼容性較差，需要計算。

.parent {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 position: relative;
}
.child {
 width: 100px;
 height: 100px;
 background: blue;
 padding: -webkit-calc((100% - 100px) / 2);
 padding: -moz-calc((100% - 100px) / 2);
 padding: -ms-calc((100% - 100px) / 2);
 padding: calc((100% - 100px) / 2);
 background-clip: content-box;
}

10 塊級元素：inline-block

HTML代碼：

<div class="parent">
 <div class="child">child</div>
 <div class="brother">brother</div>
</div>

CSS代碼：

.parent {
 width: 400px;
 height: 400px;
 border: 1px solid red;
 position: relative;
}
.child, .brother {
 display: inline-block;
 vertical-align: middle;
}
.child {
 background: blue;
 font-size: 12px;
}
.brother {
 height: 400px;
 font-size: 0;
}

其他

當然，還有一種方法，就是使用table布局:

<table>
 <tr>
 <td align="center" valign="middle">content</td> 
 </tr>
 </table>

因為html還要加table等標簽，冗余有點多，而且結構也改變了。

好啦，分享到這里也就結束了，下次見。

關注我的頭條號，分享更多的技術學習文章，我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

、水平居中

1.1 行內元素

.parent {
 text-align: center;
}

1.2 塊級元素

1.2.1 塊級元素一般居中方法

.son {
 margin: 0 auto;
}

1.2.2 子元素含 float

.parent{
 width:fit-content;
 margin:0 auto;
}
.son {
 float: left;
}

1.2.3 Flex 彈性盒子

1） flex 2012版

.parent {
 display: flex;
 justify-content: center;
}

2）flex 2009版

.parent {
 display: box;
 box-orient: horizontal;
 box-pack: center;
}

1.2.4 絕對定位

1）transform

.son {
 position: absolute;
 left: 50%;
 transform: translate(-50%, 0);
}

2）left: 50%

.son {
 position: absolute;
 width: 寬度;
 left: 50%;
 margin-left: -0.5*寬度
}

3）left/right: 0

.son {
 position: absolute;
 width: 寬度;
 left: 0;
 right: 0;
 margin: 0 auto;
}

小結

以上是 CSS 水平居中的 8 種方法。

二、垂直居中

2.1 行內元素

.parent {
 height: 高度;
}
.son {
 line-height: 高度;
}

注：① 子元素 line-height 值為父元素 height 值。② 單行文本。

2.2 塊級元素

2.2.1 行內塊級元素

.parent::after, .son{
 display:inline-block;
 vertical-align:middle;
}
.parent::after{
 content:'';
 height:100%;
}

適應 IE7。

2.2.2 table

.parent {
 display: table;
}
.son {
 display: table-cell;
 vertical-align: middle;
}

優點

元素高度可以動態改變, 不需再CSS中定義, 如果父元素沒有足夠空間時, 該元素內容也不會被截斷。

缺點

IE6~7, 甚至IE8 beta中無效。

2.2.3 Flex 彈性盒子

1）flex 2012版

.parent {
 display: flex;
 align-items: center;
}

優點

內容塊的寬高任意, 優雅的溢出。
可用于更復雜高級的布局技術中。

缺點

IE8/IE9不支持。
需要瀏覽器廠商前綴。
渲染上可能會有一些問題。

2）flex 2009版

.parent {
 display: box;
 box-orien: vertical;
 box-pack: center;
}

優點

實現簡單, 擴展性強。

缺點

兼容性差, 不支持IE。

2.2.4 絕對定位

1）transform

.son {
 position: absolute;
 top: 50%;
 transform: translate( 0, -50%);
}

優點

代碼少。

缺點

IE8不支持, 屬性需要追加瀏覽器廠商前綴, 可能干擾其他 transform 效果, 某些情形下會出現文本或元素邊界渲染模糊的現象。

2）top: 50%

.son {
 position: absolute;
 top: 50%;
 height: 高度;
 margin-top: -0.5高度;
}

優點

適用于所有瀏覽器。

缺點

父元素空間不夠時, 子元素可能不可見(當瀏覽器窗口縮小時,滾動條不出現時).如果子元素設置了overflow:auto, 則高度不夠時, 會出現滾動條。

3）top/bottom: 0;

.son {
 position: absolute;
 top: 0;
 botton: 0;
 margin: auto 0;
}

優點

簡單。

缺點

沒有足夠空間時, 子元素會被截斷, 但不會有滾動條。

小結

以上是 CSS 垂直居中的 8 種方法及其優缺點。

鏈接：https://juejin.im/post/5c8f9e595188252db756920c
作者：Agoreal

在線咨詢

上一篇：產品經理要學習的技術都在這里！
下一篇：5個小眾又實用的網站，忍不住分享，每個都讓你相見恨晚

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

《小白HTML5成長之路30》怎樣讓任意塊元素基于父

、水平居中

二、垂直居中

您的項目需求

、水平居中

二、垂直居中