關于css 的垂直居中

icattlecoder 發布于2019-08-29 13:56 / 1366人閱讀

摘要：之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習，再次謝謝張大大阮大大的各種分享。

對于元素的水平居中，我根據我自己之前的一些學習來進行一些總結，如果有不對的地方，歡迎指正~

一、讓大小不固定的元素垂直居中

因為：表格的單元格的特別屬性：垂直居中等；
`div.parent {

   display: table-cell;
   vertical-align: middle;
   height: 200px;

}
div.parent img{
}`

屬性line-height的設置
`div.parent{

   height: 100px;
   line-height:100px;

}
div.parent img{

   vertical-align:middle;

絕對定位 + margin:auto;
div.parent{

   height: 300px;
   width: 300px;
   position: relative;
   background-color: red;

}
div.parent img{

   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;

}
ps.第三種方法我很久以前也有用過，一開始我簡單的認為是：由于上下左右都設置為0了所以 margin auto后元素自適應居中，于是某一天我看到了張鑫旭大大的博客才就知道了為什么：引用張大大的話：

1.當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性就發生了;
2.因為left/right同時存在，所以寬度自適應于包含塊的padding box寬度，也就是隨著包含塊padding box的寬度變化，包含塊寬度也會跟著一起變。具有流體特性絕對定位元素的margin:auto的填充規則和普通流體元素一模一樣：
如果一側定值，一側auto，auto為剩余空間大小；如果兩側均是auto, 則平分剩余空間；

二、大小固定的元素垂直居中

對于大小固定的元素，上面的幾個方法也是可以用的。

1.絕對定位 + margin:-元素的寬度&&高度

    div.parent{
        height: 200px;
        width: 200px;
        position: relative;
        background-color: red;
    }
    div.parent img{
        width: 100px;
        height: 100px;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
    }
        //定位額度時候以元素的右上角為參考點，所以我們需要負值的margin把相差的元素的一半的寬高大小的距離拉回來

對于固定寬高的還有其它很多方法啦，我就不一一列舉了。

之前看了張大大的博客,總結一下我對line-height 和 vertical-align的一些認知。vertical-align 的幾個屬性值baseline，bottom，top，middle 等跟文字的基線相關聯，而line-height 是無論大小都與文字垂直居中的，比如line-height與高度一致可以設置文字居中，所以，一樣的道理，vertical-align 跟line-height 可以聯手設置垂直居中。

我覺得在網頁的布局中，如果出現任何難理解的奇怪的現象，都可以先從 line-height 和vertical-align 上排除.

以上是我的學習總結，希望大家堅持，加油，你不是一個人在奮斗。

站在巨人的肩膀上學習，再次謝謝張大大阮大大的各種分享。

GPU云服務器云服務器垂直居中實現垂直居中水平垂直居中文字垂直居中

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

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

關于css 的垂直居中

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

caspar 2019-08-02 15:58 評論0 收藏0
垂直居中相關知識總結

摘要：垂直居中相關知識總結前言工作中用到了很多關于垂直居中相關的知識之前，在上提問了個問題關于垂直居中，大家有沒有什么比較好的建議。垂直居中相關知識總結前言工作中用到了很多關于垂直居中相關的知識之前，在SF上提問了個問題CSS關于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結一下。方法總結一、絕對定...

Labradors 2019-08-19 17:31 評論0 收藏0
垂直居中相關知識總結

摘要：垂直居中相關知識總結前言工作中用到了很多關于垂直居中相關的知識之前，在上提問了個問題關于垂直居中，大家有沒有什么比較好的建議。垂直居中相關知識總結前言工作中用到了很多關于垂直居中相關的知識之前，在SF上提問了個問題CSS關于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結一下。方法總結一、絕對定...

GeekGhc 2019-08-01 15:02 評論0 收藏0
對css居中的一點總結

摘要：為了更好的加深對居中的理解，搜集和閱讀相關資料，發現不錯的文章將其整理出來。在學習前端的過程中，發現元素和文本的水平居中和垂直居中，是經常會出現的問題，在實際工作中也會經常碰到。居中的技巧有很多，但在編寫代碼的過程中，發現有時候技巧管用，有時候不管用，于是就將每個知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認識不夠深入，只是停留在實現需求的水平上。為了更好的加深對居中的...

BenCHou 2019-08-29 11:17 評論0 收藏0
關于Css的垂直居中的一些方法

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

simpleapples 2019-08-29 10:55 評論0 收藏0