1. Home
  2. 综合讨论
  3. 水平居中布局的总结

水平居中布局的总结

  • icewing

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

    关于居中布局

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

    水平居中布局

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

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

    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中新增属性，游览器支持情况不好。
    0
css 4 html 3
Log in to reply
 

更多推荐主题