浮动元素如何水平居中

Posted 2020-11-15 ifon

如何让一个浮动元素水平居中

1. 最简单的办法，向右推移50%，然后在平移自身宽度的一半

    .box{
            width: 700px;
            height: 400px;
            border: 1px solid #000;
        }
        .con{
            width: 200px;
            height: 100px;
            float: left;
            background-color: orangered;

            margin-left: 50%;
            transform: translateX(-50%);

        }

1. 给浮动元素套一个盒子，让其浮动，并且相对定位left:50%,然后在让其浮动元素相对定位，right:50%

        .box{
            width: 700px;
            height: 400px;
            border: 1px solid #000;
        }
        .con_outer{
            float: left;
            position: relative;
            left: 50%;
        }
        .con{
            width: 200px;
            height: 100px;
            float: left;
            background-color: orangered;

            position: relative;
            right: 50%;

        }