垂直居中布局的总结



  • 关于垂直居中布局

    和水平居中布局类似,是指当前元素在父级元素容器中,垂直方向是居中显示的。

    实现方案

    1. 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: 200px;
                height: 600px;
                background: #999;
    			display: table-cell;
    			vertical-align: middle;
            }
            
            .child {
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
    </head>
    
    <body>
        <!-- 父级容器 -->
        <div class="parent">
            <!-- 子级元素 -->
            <div class="child">
    
            </div>
        </div>
    </body>
    
    </html>
    
    • 思考1 - 为什么设置display为table-cell

    将父级元素设置为单元格,其中的内容可以有两种对齐方式,居中和垂直

    优点与缺点

    优点:

    • 游览器的兼容性好

    缺点:

    • vertical-algin属性具有继承性,导致父级元素的文本内容也是垂直居中

    第二种方案

    沿用上方代码,只改变css

            * {
                padding: 0;
                margin: 0;
            }
            
            .parent {
                width: 200px;
                height: 600px;
                background: #999;
    			position: relative;
            }
            
            .child {
                width: 200px;
                height: 200px;
                background: red;
    			position: absolute;
    			top: 50%;
    			transform: translateY(-50%);
            }
    
    • 此方法非常类似于水平居中的第三种

    优点与缺点

    优点:

    • 父级元素是否脱离文档流,不影响子级元素垂直居中

    缺点:

    • transform 属性是css3的新增属性,有游览器支持问题

Log in to reply
 

更多推荐主题