让横向排列的几个浮动(float:left)的子div居中显示

要让横向排列的浮动子 div 居中显示，可以采用以下两种方法：

要让横向排列的浮动子 div 居中显示，可以采用以下两种方法：

1. 使用 Flex 布局

使用 Flex 布局是最简单、最好理解的方法，同时也是最常用的方法之一。通过设置 flex 容器的属性，可以让子元素自动排列，并自动居中。

以下是具体实现步骤：

1. 设置容器的 display 属性为 flex。

.parent {
  display: flex;
}

1. 设置容器中子元素的对齐方式为居中。

.parent {
  display: flex;
  justify-content: center; /* 对齐方式-水平居中 */
  align-items: center; /* 对齐方式-垂直居中 */
}

1. 调整子元素的宽度为所需宽度，因为这里子元素设置了浮动，浮动元素默认宽度尽量自适应，如果要设置子元素的固定宽度，可以借助 box-sizing 属性设置为 border-box。

.parent .child {
  width: 200px;
  box-sizing: border-box;
}

以下是代码示例：

<div class="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.parent .child {
  float: left;
  width: 200px;
  box-sizing: border-box;
}

2. 使用绝对定位和 margin 负值进行居中

如果不使用 Flex 布局，也可以通过使用绝对定位和 margin 负值的方式来实现子元素的居中显示。

以下是具体实现步骤：

1. 设置父容器的 position 属性为 relative，以便后续子元素的绝对定位参照。

.parent {
  position: relative;
}

1. 给每个子元素设置绝对定位，并使用 left 和 top 属性共同确定子元素位置。为了让子元素水平居中，可以设置 left 属性为 50%，左侧边距为子元素宽度的一半，即 -(子元素宽度 / 2)。为了让子元素垂直居中，可以设置 top 属性为 50%，上边距为子元素高度的一半，即 -(子元素高度 / 2)。

.parent .child {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 宽度的一半 */
  margin-top: -50px; /* 高度的一半 */
}

以下是代码示例：

<div class="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.parent {
  position: relative;
}
.parent .child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -50px;
}

两种方法各有优缺点，需要根据实际情况选择使用，例如在需要兼容旧浏览器的情况下，可以使用第二种方法。如果只考虑现代浏览器，而且布局不太复杂，推荐使用第一种方法，因为它更加简单并且易于维护。