水平垂直居中布局的总结



  • 关于水平垂直居中布局

    简单说就是将之前水平、垂直居中的整合

    解决方案

    1. table + margin 实现水平居中,table-cell + vertical-algin 实现垂直居中
    2. absolute + transform 实现水平、垂直居中

    第一种

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>水平垂直居中的方案</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            .parent {
                width: 600px;
                height: 600px;
                background: #999;
    			display: table-cell;
    			vertical-align: middle;
            }
            
            .child {
                width: 200px;
                height: 200px;
                background: red;
    			display: block;
    			margin: 0 auto;
            }
        </style>
    </head>
    
    <body>
        <!-- 父级容器 -->
        <div class="parent">
            <!-- 子级元素 -->
            <div class="child">
    
            </div>
        </div>
    </body>
    
    </html>
    
    • 这里为了语义化,将child的display设置为block

    第二种

    沿用上方的代码,只改动css

            * {
                padding: 0;
                margin: 0;
            }
            
            .parent {
                width: 600px;
                height: 600px;
                background: #999;
    			position: relative;
            }
            
            .child {
                width: 200px;
                height: 200px;
                background: red;
    			position: absolute;
    			left: 50%;
    			top: 50%;
    			transform: translate(-50%,-50%);
            }
    
    • 此种方法如果要兼容老版本游览器请注意transform属性

Log in to reply
 

更多推荐主题