浮動元素如何水平居中

如何讓一個浮動元素水平居中

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%);

        }

2. 給浮動元素套一個盒子，讓其浮動，並且相對定位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%;

        }