css揭秘 筆記 垂直居中

2021-07-24 18:17:55 字數 1288 閱讀 5696

css揭秘第40個小技巧

整篇文章所使用的的結構**如下:



an i center yet h1>


center me !pleasep>
1 基於絕對定位的解決方案

main
這段**所做的事情相信有css基礎的同學都了解，這裡不做過多的解釋。在網上就能找到這種解決方案。用calc()函式還能再優化一下

main
現在我們實現了垂直居中的效果，但是這種實現方式有乙個很明顯的缺點事寬度和高度是固定的，有時候和我們的需求衝突，所以我們需要再優化一下，要能適配不同內容。

main
原理: margin的百分比是以其父元素的尺寸為基準進行解析的，

translate變形函式是以其自身的寬度和高度進行轉換的。

現在我們完美的實現了垂直居中

上面這個方法有一些地方需要注意的

1. 我們有時不能使用絕對定義，因為它對整個布局的影響太強烈

2. 如果需要居中的元素在高度上超過了視口，那麼他的頂部會被視口剪下掉

3. 3在某些瀏覽器上，這個方法可能會導致元素的顯示有一些模糊，因為元素可能會放置在半個畫素上面，這個問題可以用transform-style:preserve-3d來修復。

2基於視口單位的解決方案

main
vh是css3定義的一套新的單位，稱為視口相關的長度單位。有興趣的同學可以自行上網搜尋學習。

這個技巧的實用性相當有限，因為他只適用於視口相關的情況下。

3基於flexbox的解決方案

這無疑是最好的解決辦法了，因為flexbox是專門為這類需求設計的，我們只需為父元素設定display:flex;再給這個元素自身設定margin:auto;

body


main
當我們適用flexbox時，margin:auto;不僅在水平方向居中，垂直方向也是一樣,還有一點，我們甚至不需要制定任何的寬度，這個居中元素非配的寬度等於max-content。

有不知道max-content的同學可以看 張鑫旭寫的文章，裡面詳細的介紹了max-content,min-content等屬性

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...

css水平居中 垂直居中 水平垂直居中

css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...

css 垂直居中

先膜拜一下鏈結裡的人。1.這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical align property 屬性。divid divid cell divclass content content goes herediv div div cell 2.這個方法使用絕對...