前言
老闆的手機收到一個紅包,為什麼紅包沒居中?
如何讓一個子元素在父容器裡水平垂直居中?這個問題必考,在實戰開發中,也應用得非常多。
你也許能順手寫出好幾種實現方法。但大部分人的寫法不夠規範,經不起千錘百煉。換句話說:這些人也就面試的時候誇誇其談,但真的上戰場的時候,他們不敢這麼寫,也不知道怎麼寫最靠譜。
這篇文章中,我們來列出幾種常見的寫法,最終你會明白,哪種寫法是最優雅的。
當然,我還會拿出實際應用中的真實場景來舉例,讓你感受一下标準垂直居中的魅力。
如何讓一個行内元素(文字、圖片等)水平垂直居中
行内元素的居中問題比較簡單。
行内元素水平居中
給父容器設置:
行内元素垂直居中
讓文字的行高 等于 盒子的高度,可以讓單行文本垂直居中。比如:
如何讓一個塊級元素水平垂直居中
這一段是本文的核心。如何讓一個塊級的子元素在父容器裡水平垂直居中?有好幾種寫法。我們一起來看看。
margin: auto 的問題
在 CSS 中對元素進行水平居中是非常簡單的:如果它是一個行内元素,就對它的父容器應用 text-align: center;如果它是一個塊級元素,就對它自身應用 margin: auto或者 margin: 0 auto。
我們都知道,margin: auto相當于margin: auto auto auto auto。margin: 0 auto相當于margin: 0 auto 0 auto,四個值分别對應上右下左。其計算值取決于剩餘空間。
但是,如果要對一個元素垂直居中,margin: auto就行不通了。
比如下面這段代碼:
上面的代碼中,父元素和子元素都是定寬高的,即便在這種情況下,我給子元素設置 margin: auto,子元素依然沒有垂直居中。
那還有沒有比較好的通用的做法呢?
方式一:絕對定位 margin(需要指定子元素的寬高,不推薦)
代碼解釋:我們先讓子元素的左上角居中,然後向上移動寬度的一半(50px),就達到了垂直居中的效果;水平居中的原理類似。
不足之處:要求指定子元素的寬高,才能寫出 margin-left和 margin-right的屬性值。
但是,在通常情況下,對那些需要居中的元素來說,其寬高往往是由其内容來決定的,不建議固定寬高。
方式二:絕對定位 translate(無需指定子元素的寬高,推薦)
這種寫法,在沒有指定子元素寬高的情況下,也能讓其在父容器中垂直居中。因為 translate() 函數中使用百分比值時,是以這個元素自身的寬度和高度為基準進行換算和移動的(動态計算寬高)。
方式3:flex 布局(待改進)
将父容器設置為 Flex 布局,再給父容器加個屬性justify-content: center,這樣的話,子元素就能水平居中了;再給父容器加個屬性 align-items: center,這樣的話,子元素就能垂直居中了。
代碼舉例:
上面這種寫法的,不足之處在于:給父容器設置屬性justify-content: center和align-items: center之後,導緻父容器裡的所有子元素們都垂直居中了(如果父容器裡有多個子元素的話)。可我明明隻向讓指定的某個子元素居中,要怎麼改進呢?
方式4: flex 布局 margin: auto(推薦)
我們隻需寫兩行聲明即可:先給父容器設置 display: flex,再給指定的子元素設置我們再熟悉不過的 margin: auto,即可讓這個指定的子元素在剩餘空間裡,水平垂直居中。大功告成。
代碼舉例:
請注意,當我們給父容器使用 Flex 布局 時,子元素的margin: auto不僅讓其在水平方向上居中,垂直方向上也是居中的。
垂直居中的典型應用場景:紅包幕簾/彈窗
問題引入
就拿“彈窗”這一點來說,現在大家的彈窗都是各種樣式、各種布局滿天飛。不過進公司後,大家在第一次寫彈窗之前,都會問一個問題:“彈窗這麼通用的東西,沒有一個規範嗎?”說完之後,又默默寫自己的有個性的彈窗去了。
建議大家在寫彈窗的時候,無論如何,一定要嚴格采用水平居中、垂直居中的寫法。
千萬不要用 margin-top 這種距離屏幕頂部的距離來計算彈窗的位置,太搓了。不要讓領導覺得:“你們寫了這麼久的前端代碼,連個彈窗都搞不定?”
移動端,紅包幕簾/彈窗 居中的規範寫法(非常标準)
移動端場景,這裡提供一個 紅包幕簾/彈窗 的居中寫法。注意,是嚴格居中,非常标準。為什麼是移動端?你有見過PC網頁端給你送紅包的麼?
在實戰開發中,下面的這段代碼,可以直接拿去用。注釋詳細,貼心無比。
實現效果:
補充:
1、如果你的頁面中,有很多彈窗,建議将彈窗封裝成一個抽象組件。
2、任何彈窗,都需要解決“滾動穿透”的問題,本文篇幅有限,請自行查閱。
最後一段
有些實現方式雖然簡單,但必須要經得起千錘百煉。我們要做到敬畏每一行代碼,不能浮于表面。團隊開發,要的不是個性,而是标準和規範。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!