如何居中浮动元素

方法一：给浮动添加一个父级元素

<style type="text/css">
        .con {
            position: relative;
            float: left;
            left: 50%;
            background: rgb(5, 175, 231);
        }
        .box {
            position: relative;
            float: left;
            left: -50%;
            width: 100px;
            height: 100px;
            background: lightcoral;
        }
    </style>
    <body>
        <div class="con">
            <div class="box"></div>  
        </div>
    </body>

蓝色的con为砖红色box的“爸爸”，从图上我们可以很清楚的看到， con通过定位往左移了百分之五十。而box通过相对定位，定位在con的-50%的地方，即为正中心。

给子元素相对定位，是想将相对于父元素来定位自己的位置，float:left让子元素在同一水平线上显示，left:-50%是因为子元素的整体宽度就是父元素的宽度，left:50%就是让子元素内容往相对父元素左上那一点往左移动父元素一半的宽度（right:50%是距右边50%，效果一样），正好实现子元素内容居中显示的效果。

 

posted @ 2019-09-14 09:05  ganiner  阅读(426)  评论(0)  编辑  收藏  举报