垂直居中解決方案總結

王偉廷發布于2019-08-29 12:43 / 3274人閱讀

摘要：而的百分比是相對于元素自身的寬高，這個方法可以用于子元素高度不確定時，而且不用手動除以，比上面幾個方便了很多。，全為可以實現上下左右居中，超級方便這也是我在項目里用得最多的。上面是基于絕對定位的解決方案，還有其他的。

點這個鏈接可以直接看到效果：http://www.zhouyangyang.com/c...

這是公用樣式

.outer {
    width: 150px;
    height: 200px;
    background: pink;
    border: 1px solid pink;
}
.inner {
    background: #77BFCD;
}

1,負margin
父元素position relative,子元素position absolute,top 50%,margin-top 為負的元素height/2。
缺點：子元素高度固定的時候才能用，而且計算麻煩。



    
        first line
        second line

2，css3 calc()
跟上面沒啥區別，也是要子元素高度固定，手動除以2。
不過可以少寫一行margin-top。



    
        first line
        second line

3,translateY
百分比形式的margin-top是相對于元素包含塊的寬度的，所以上面的方法都要手動除以2。
而 translateX translateY 的百分比是相對于元素自身的寬高，這個方法可以用于子元素高度不確定時，而且不用手動除以2，比上面幾個方便了很多。
有些瀏覽器下，transform后如果寬高的像素點不是整數，顯示會模糊，可以用transform-style:preserve-3d修復。



    
        first line
        second line

4,margin auto，top right left bottom 全為0
可以實現上下左右居中，超級方便,這也是我在項目里用得最多的。不過這個只能在元素設置了寬高的時候用。



    
        first line
        second line

上面是基于絕對定位的解決方案，還有其他的。
5，表格布局
父元素display table-cell,virticl-align middle,子元素display table。



    
        first line
        second line

6，行內塊方法
將子元素設置display:inline-block，vetical-align:middle,父元素行高等于高度，
缺點是只能用在父元素高度固定的條件下。



    
        first line
        second line

7，另一種行內塊方法
給父元素一個:before偽子元素，讓這個偽元素height:100%，然后讓這個偽子元素和真正的子元素都display:inline-block vetical-align:middle。



    
        first line
        second line

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

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

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

對css居中的一點總結

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

BenCHou 2019-08-29 11:17 評論0 收藏0
css對齊方案總結

摘要：核心代碼利用布局利用布局，其中用于設置或檢索彈性盒子元素在主軸橫軸方向上的對齊方式而屬性定義子項在容器的當前行的側軸縱軸方向上的對齊方式。核心代碼相對于的水平垂直居中列表布局兼容性好核心代碼布局核心代碼css對齊方案總結垂直居中通用布局方式(內斂元素和塊狀元素都適用) 利用flex:核心代碼: 12345 .container{ display:flex; ...

marek 2019-04-23 11:45 評論0 收藏0
css居中總結

摘要：前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。又必須有個父級對其進行設置居中。前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。水平居中行內元素水平居中行內元素的居中比較簡單，直...

gxyz 2019-08-30 15:55 評論0 收藏0
前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 評論0 收藏0
總結：前端開發中讓元素水平垂直居中的方法

摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 評論0 收藏0