CSS 如何使两个浮动的 div 元素居中显示

在本文中，我们将介绍如何使用 CSS 来实现让两个浮动的 div 元素在页面中水平居中显示，同时它们可以并排排列。

阅读更多：CSS 教程

浮动元素的基本使用

首先，我们需要了解浮动元素的基本使用。通过使用 float 属性，我们可以将元素从正常的文档流中脱离，使其浮动到其他元素的一侧。下面是一个示例代码：

<style>
    .div1 {
        float: left;
    }
    .div2 {
        float: right;
    }
</style>

<div class="div1">这是 div1</div>
<div class="div2">这是 div2</div>

在上面的代码中，我们创建了两个 div 元素，一个浮动到左侧（.div1），另一个浮动到右侧（.div2）。这两个 div 元素将会并排显示在一行上。

使用常见的居中方法

要使两个浮动的 div 元素在页面中水平居中，我们可以使用以下三种常见的方法：使用 margin: 0 auto;、使用 display: flex;、使用网格布局。

方法一：使用 margin 居中

<style>
    .container {
        width: 600px;
        margin: 0 auto;
    }

    .div1 {
        float: left;
    }

    .div2 {
        float: right;
    }
</style>

<div class="container">
    <div class="div1">这是 div1</div>
    <div class="div2">这是 div2</div>
</div>

在上面的代码中，我们将两个浮动的 div 元素放在一个父级容器（.container）中，并给父级容器设置了一个固定的宽度（600px），然后通过设置 margin 属性为 0 auto，使父级容器水平居中。

方法二：使用 flexbox 居中

<style>
    .container {
        display: flex;
        justify-content: center;
    }

    .div1 {
        float: left;
    }

    .div2 {
        float: right;
    }
</style>

<div class="container">
    <div class="div1">这是 div1</div>
    <div class="div2">这是 div2</div>
</div>

在上面的代码中，我们将两个浮动的 div 元素放在一个父级容器（.container）中，并使用 display: flex; 和 justify-content: center; 属性实现水平居中。

方法三：使用网格布局居中

<style>
    .container {
        display: grid;
        place-items: center;
        width: 100%;
    }

    .div1 {
        float: left;
    }

    .div2 {
        float: right;
    }
</style>

<div class="container">
    <div class="div1">这是 div1</div>
    <div class="div2">这是 div2</div>
</div>

在上面的代码中，我们将两个浮动的 div 元素放在一个父级容器（.container）中，并使用 display: grid; 和 place-items: center; 属性实现水平居中。

总结

本文介绍了如何使用 CSS 实现让两个浮动的 div 元素在页面中水平居中显示，并提供了三种常见的方法：使用 margin: 0 auto;、使用 display: flex; 和 justify-content: center;，以及使用网格布局的方式。通过这些方法，我们可以灵活地在网页中实现多个并排的浮动元素的水平居中。