從頭開始 CSS 垂直居中

2021-09-13 23:10:17 字數 1605 閱讀 3436

事實上，每次面試前端必問的問題就是這個。及其常見的需求，看起來似乎非常簡單，但是實現起來很費勁，尤其是涉及尺寸不固定的元素。

本篇文章將介紹比較流行的幾種方法。



hello


#ghost
本質上是利用了內聯元素的vertical-align屬性，通過將此屬性置為middle，同一行內的內聯元素都將以設定這一屬性的內聯元素的基線對齊。

基於inline-block特有的屬性：擁有內聯元素的特性同時可以定義寬高，我們可以設定乙個ghost行內塊用於定義高度，再讓其他內聯元素與其對齊，實現垂直居中。

當然我們也可以將其它元素置為行內塊，再設定寬度並新增text-align使其水平居中。

總結一下，此方法太過hack。

hello


#main 


#child
顯然，這種方法的原理是：先利用絕對定位將這個元素的左上角放置與父元素的正中間，再利用負邊距將它向左上移動它本身的一半。

如果借助calc()函式可以說明得更加清楚：

#child
實際中大多數時候我們並不知道子元素的實際寬高。

如果你屬性translate()函式，你一定知道當它的引數為百分比時，它會按照元素本身的百分比值進行變換，我們可以通過這個方法徹底擺脫對尺寸的依賴！

#child
看起來已經完美解決了，但是它還有以下的缺陷：

絕對定位會對整體的布局造成很強烈的影響。

如果居中的元素超過了視窗會被裁剪掉。

在某些瀏覽器中，元素可能會被放置在半個畫素上造成模糊。

如果我們不採用絕對定位，對子元素設定margin使其左上角置於父元素中點，再用translate重複上一種方法的操作，是否可以實現呢？

答案是不可以，因為margin的百分比是以父元素的寬度為基準的，即便是top和bottom也是！ 沒錯，很扯。

如果僅僅想要垂直於視口，我們可以採用css中相對於視口的單位vw、vh、vmin、vmax

#child
它只能基於視口居中。

flex當然是未來的趨勢，上面的一切都可以理解成為了照顧老舊的瀏覽器的猴戲（雖然translate和視口單位的相容性也不怎麼好）。

hello


#main 


body
啊，很難受。使用flexbox時，margin：auto不僅在水平方向上將元素居中，垂直方向上也是如此。

如果你熟悉flex的話，其實還有多種實現方式。

body
或者對子元素單獨設定交叉軸對齊方式：

body 


#main

Deep Learning 從頭開始

deep learning已經火了好久，有些人已經在這裡面耕耘了好多年，而有些人才剛剛開始，比如本人。如何才能快速地進入這個領域在較短的時間內掌握deep learning最新的技術是值得思考的問題。就目前的情況看，通過網路上的課程及各種tutorials以及各種 來研究這個領域是最佳的途徑。經過一...

git從頭開始

當你本地修改了乙個檔案，而且該檔案被另乙個人修改，並push了，那麼 users terry workspace git練習 git practise git master git pull updating 67e4e18.cdbf666 error your local changes to t...

English 從頭開始

我們有好多事情都不能重新開始，比如我們的人生你沒有辦法把自己在塞回媽媽的肚子裡吧？比如我們的時間在此時此刻只有這乙個時間，全世界不會再有第二個。比如我們後悔的事情.雖然有很多我們無法改變的事情存在，但也有許多我們可以改變的事情。雖然我們沒有辦法從一歲開始重新開始，但我們可以掌握自己的人生，做自己想做...