如何让浮动后的多个盒子水平居中

Answer 1

    第一种，如果有固定的宽高。用一个和所有浮动盒子等宽的大盒子包裹起来，然后设置大盒子的margin:0 auto;就可以水平居中。需要注意大盒子的宽除了要包括里面盒子的总宽外还要包括每个盒子的外边距，内填充，边框等。还有大盒子里面所有元素浮动之后，大盒子的高度消失的问题。
    第二种，使用绝对或相对定位。还是用一个大盒子包裹起来，大盒子的position设置成absolute或者relative，然后大盒子的left为50%，margin-left设置为负的大盒子宽度的一半，这也需要知道大盒子的宽度。
    第三种，不需要设置任何宽度。所有盒子不使用浮动，而使用display:inline-block;来使盒子在一行显示，然后设置父元素的text-align:center;来使子元素居中。父元素需要占整个一行，并且每个盒子的html标签之间不能有空格或者换行，也就是必须紧挨着。这样的好处是，不用设置任何宽度，每个盒子可以自适应内容的宽度。

Answer 2

.clear {
  clear: both;
  width: 100%;
  overflow: hidden;
}

首先呢，楼主需要一个大盒子把所有浮动的盒子包起来，并在大盒子的最后面放一个class="clear"的div。然后呢，给大盒子设定合适的width，并且设置为margin:0 auto;然后就很开森的居中咯

Answer 3

用 flex 布局