如何居中浮动元素

Posted 2022-10-29 ganiner

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何居中浮动元素相关的知识，希望对你有一定的参考价值。

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

<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%，效果一样），正好实现子元素内容居中显示的效果。

以上是关于如何居中浮动元素的主要内容，如果未能解决你的问题，请参考以下文章

Web前端面试指导(十四)：如何居中一个元素（正常绝对定位浮动元素）?

CSS：尽管旁边有浮动元素，如何使文本居中？

如何垂直居中一个浮动元素