实现水平垂直居中的4种方法

Posted 2022-11-30 好_快

1、第一类 absolute 和 margin

1.1 position: absolute 和 margin: auto

    .parent1 
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        position: relative;
        line-height: 300px;
    

    .child1 
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    

1.2 position: absolute 和 margin: - 一半宽度/高度

    .parent2 
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        position: relative;
    

    .child2 
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        /*自身宽度的一半*/
        margin-left: -75px;
        /*自身高度的一半*/
        margin-top: -75px;
    

2、第二类 position: absolute 和 translate

    .parent3 
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        position: relative;
    
    .child3 
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        /*自身宽高的一半*/
        transform: translate(-50%, -50%);
    

3、第三类 flex

    .parent4 
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    
    .child4 
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
    

代码链接

水平垂直居中.html

参考链接

• margin
• transform
• transform-function
• CSS 弹性盒子布局
• flex-direction
• justify-content
• align-items