垂直居中

2024年3月12日 106次阅读 来源: charles

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
    原文作者：charles
    原文地址: https://segmentfault.com/a/1190000009879346
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞