水平居中布局的总结



  • 布局不是某个技术内容,而是一种设计思想。

    关于居中布局

    分成三种:水平居中、垂直居中、水平垂直居中

    水平居中布局

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

    下面介绍了三种常用的水平居中布局方式,其他不常用的可以自行探索

    inline-block + text-align 属性配合使用

    <!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: 100%;
                height: 300px;
                background: #999;
                text-align: center;
            }
            
            .child {
                width: 200px;
                height: 200px;
                background: red;
                display: inline-block;
            }
        </style>
    </head>
    
    <body>
        <!-- 父级容器 -->
        <div class="parent">
            <!-- 子级元素 -->
            <div class="child">
    
            </div>
        </div>
    </body>
    
    </html>
    
    • 思考1 - 为什么text-align会对子级元素生效

    因为子级元素display属性为inline-block(行内块级元素),有内联元素的特性,所以会生效

    • 思考2 - 为什么不直接用display:inline(内联元素)?

    当设置属性为inline时,其width和height属性将无效,需要为child内添加内容才可以显示。是否使用inline需要根据自身场景灵活变动。

    优点与缺点

    优点:

    • 游览器兼容性比较好

    缺点:

    • text-align 属性具有继承性,导致子级元素的文本内容也是居中显示的

    • 解决:为child属性重新设置,如text-align:left


    table + margin 配合使用

    沿用上面的代码,只改变css

            * {
                padding: 0;
                margin: 0;
            }
            
            .parent {
                width: 100%;
                height: 300px;
                background: #999;
            }
            
            .child {
                width: 200px;
                height: 200px;
                background: red;
                display: table;
                margin: 0 auto;
            }
    
    • 思考1 - display一定要为table吗

    这里设置为table是优先排除了默认的block属性,当设置margin:0 auto,display为table或block才会生效。

    优点与缺点

    优点:

    • 只需要对子级元素设置即可。

    缺点:

    • 如果子级元素脱离文档流,导致margin属性的值无效,无法居中。

    脱离文档流的情况:

    • 设置了float浮动
    • 设置为绝对定位absolute
    • 设置为固定定位fixed

    absolute + transform 属性配合使用

    沿用上面的代码,只改变css

            * {
                padding: 0;
                margin: 0;
            }
            
            .parent {
                width: 100%;
                height: 300px;
                background: #999;
                position: relative;
            }
            
            .child {
                width: 200px;
                height: 200px;
                background: red;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
    
    • 思考1 - 绝对定位的情况
    1. 如果父级元素没有开启定位的话,当前元素是相对于页面定位的;

    2. 如果父级元素开启了定位的话,当前元素是相对于父级元素定位的;

    • 思考2 -transform为什么不用子级元素的一半100px?

    考虑到子级元素可能不是固定的宽度。用-50%可以自行调节。

    • 思考3 - position可以有哪些值

    position设置可以是fixed、absolute、relative

    优点与缺点

    优点:

    • 父级元素无论是否脱离文档流,不影响子集元素水平居中效果

    缺点:

    • transform属性是css3中新增属性,游览器支持情况不好。

Log in to reply
 

更多推荐主题