關于Css的垂直居中的一些方法

freewolf 發布于2019-08-01 15:23 / 1750人閱讀

摘要：前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來說不怎么看得出來，除非你用調用來查看。隨著的泛濫，很快老舊的瀏覽器也就成了古董，所以這個居中方法也挺不錯，就是對于兼容性很高的項目，最好不要使用。

前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來說不怎么看得出來，除非你用javascript調用
offsetTop來查看。不然沒有強迫癥的比較難看出來。但是兼容性很好，尤其是table-cell的從IE6即可使用

1.使用table-cell處理圖片間的關系

父元素使用display:table-cell; vertical:middle
子元素使用display:inline-block; vertical:middle;

即可簡單使圖片居中

2.使用line-height處理

父元素使用display:inline-block;height:300px;line-height:300px;vertical-align:middle;//這里的line-heiht要跟父元素大小一樣；
子元素使用vertical-align:middle;

第三種稱為絕對居中，不居中來找我，就是兼容性有點差，起碼要IE9 才能兼容，一般的webkit也都沒問題就是。隨著ES6的泛濫，很快老舊的瀏覽器也就成了古董，所以這個居中方法也挺不錯，就是對于兼容性很高的項目，最好不要使用。但是有問題的是，必須指定height，因為顯然，這邊計算的是下移50%的當前高度的Y軸。而前面兩種方法不需要
3.使用translateY來垂直居中

父元素使用position:relative;height:400px;
子元素position:relative;transfrom:translateY(-50%);height:100px;top:50%;

以下是全部代碼，自己找張demo.jpg做實驗就可以

部分idea 參考自以下文章

GPU云服務器云服務器數據分析的一些方法垂直居中實現垂直居中水平垂直居中

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

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

關于css 的垂直居中

摘要：之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習，再次謝謝張大大阮大大的各種分享。對于元素的水平居中，我根據我自己之前的一些學習來進行一些總結，如果有不對的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中因為：表格的單元格的特別屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...

caspar 2019-08-02 15:58 評論0 收藏0
關于css 的垂直居中

摘要：之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習，再次謝謝張大大阮大大的各種分享。對于元素的水平居中，我根據我自己之前的一些學習來進行一些總結，如果有不對的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中因為：表格的單元格的特別屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...

icattlecoder 2019-08-29 13:56 評論0 收藏0
關于Css的垂直居中的一些方法

摘要：前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來說不怎么看得出來，除非你用調用來查看。隨著的泛濫，很快老舊的瀏覽器也就成了古董，所以這個居中方法也挺不錯，就是對于兼容性很高的項目，最好不要使用。前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來說不怎么看得出來，除非你用javascript調用offsetTop來查看。不然沒有強迫癥的比較難看出來。但是兼容性...

simpleapples 2019-08-29 10:55 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0