垂直居中

sarva 發(fā)布于2019-08-29 12:49 / 1906人閱讀

1.line-height

html :

div.parent
    div.child

css :

.parent
    height 736px
    line-height @height

2.display: table

html :

div.parent
    div.child

css :

.parent
    display table
.child
    display table-cell
    vertical-align middle

3.position

html :

div.parent
    div.child

css :

.parent
    position relative        
.child
    position absolute
    top 50%
    height 736px
    margin-top -(@height / 2)

4.position

html :

div.parent
    div.child

css :

.parent
    position relative
.child
    position absolute
    top 0
    bottom 0
    margin auto

5.padding

html :

div.parent
    div.child

css :

.parent
    padding 5% 0
.child
    padding 10% 0

6.float

html :

div.parent
    div.floater
    div.child

css :

html, body
    height 100%       
    .parent 
        height @height
    .floater
        float left
        height @height / 2
        width @height
        margin-bottom -50px
    .child
        clear both
        height 100px

7. :before

要求display inline-block
html :

div.parent
    div.child

css :

.parent:before 
    content ""
    display inline-block
    height 100%
    vertical-align middle
.child
    display inline-block
    vertical-align middle

8.translate

html :

    div.parent
        div.child

css :

.parent            
    height 100%
    position relative
    .child    
        position absolute
        top @height / 2
        transform translateY(-50%)

9. display: box

html :

div.parent
    div.chlid

css :

.parent
    display -webkit-box
    -webkit-box-align center

10.flex

html :

div.parent
    div.child

css :

.parent
    display flex
    align-items center

云服務(wù)器 GPU云服務(wù)器垂直居中實現(xiàn)垂直居中水平垂直居中文字垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112162.html

相關(guān)文章

網(wǎng)頁設(shè)計的垂直居中

摘要：推薦閱讀原文原文鏈接網(wǎng)頁設(shè)計的垂直居中此系列為網(wǎng)頁設(shè)計中經(jīng)常使用到的垂直居中解決方法，通過本文進(jìn)行詳細(xì)地總結(jié)。推薦閱讀原文原文鏈接：網(wǎng)頁設(shè)計的垂直居中此系列為網(wǎng)頁設(shè)計中經(jīng)常使用到的垂直居中解決方法，通過本文進(jìn)行詳細(xì)地總結(jié)。使用line-height做垂直居中 See the Pen 使用line-height做垂直居中 by whjin (@whjin) on Co...

Scholer 2019-08-30 15:56 評論0 收藏0
水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定

摘要：包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動元素絕對定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中，比較特殊。 2018.05.29 居中一個元素？你會想到啥？這里面的知識還真不少。包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動元素、絕對定位的居中。為了代碼簡介，沒有加背景和其他樣式，需要看效果的，可以加上背景。目錄：第一...

waterc 2019-08-29 15:32 評論0 收藏0
水平垂直居中

摘要：筆記整理之一水平垂直居中固定寬高一般使用負(fù)值進(jìn)行居中不固定寬高一般使用和進(jìn)行下面三種方案平常都很少被使用的到移動端一般使用方案在移動端都可以使用文本水平垂直居中文本垂直文本垂直居中移動端水平垂直居中垂直居中方案快級元素筆記整理之一：水平垂直居中 PC固定寬高、一般使用maring負(fù)值進(jìn)行居中PC不固定寬高、一般使用relative和left進(jìn)行下面三種方案平常都很少被使用的到 ...

incredible 2019-08-30 12:43 評論0 收藏0
水平垂直居中

摘要：筆記整理之一水平垂直居中固定寬高一般使用負(fù)值進(jìn)行居中不固定寬高一般使用和進(jìn)行下面三種方案平常都很少被使用的到移動端一般使用方案在移動端都可以使用文本水平垂直居中文本垂直文本垂直居中移動端水平垂直居中垂直居中方案快級元素筆記整理之一：水平垂直居中 PC固定寬高、一般使用maring負(fù)值進(jìn)行居中PC不固定寬高、一般使用relative和left進(jìn)行下面三種方案平常都很少被使用的到 ...

eechen 2019-08-01 14:54 評論0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實現(xiàn)。 1、水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中 1.1 行內(nèi)元素水平居中這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實現(xiàn)。 .center{ te...

scwang90 2019-08-30 14:19 評論0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實現(xiàn)。 1、水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中 1.1 行內(nèi)元素水平居中這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實現(xiàn)。 .center{ te...

Lsnsh 2019-08-02 10:04 評論0 收藏0