CSS 水平对齐div，不使用浮动

在本文中，我们将介绍如何使用CSS在不使用浮动的情况下水平对齐div。水平对齐是网页布局中常见的任务之一，可以使页面看起来更加整洁和专业。我们将介绍两种方法来实现水平对齐div，并提供示例代码来演示每种方法的使用。

阅读更多：CSS 教程

使用display: inline-block

一种常见的方法是使用CSS属性display: inline-block来使div水平对齐。当我们将display属性设置为inline-block时，元素将被显示为行内元素，但可以设置宽度和高度。这使得我们能够将多个div水平排列在一行上。

下面是一个示例，演示如何使用display: inline-block来水平对齐两个div：

<style>
    .container {
        text-align: center;
    }

    .box {
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: gray;
        margin: 10px;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

在上面的代码中，我们创建了一个.container容器，设置其text-align属性为center，以使内部的div在容器中水平对齐。两个.box div使用display: inline-block和固定宽度、高度来定义它们的样式，并通过设置margin属性来添加间距。

使用flexbox布局

另一种方法是使用CSS3的flexbox布局。Flexbox提供了一种简单而强大的方式来创建自适应的布局，可以很容易地实现水平和垂直对齐。

下面是一个示例，演示如何使用flexbox布局来水平对齐三个div：

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

    .box {
        width: 200px;
        height: 200px;
        background-color: gray;
        margin: 10px;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

在上面的代码中，我们创建了一个.container容器，并将其display属性设置为flex以启用flexbox布局。我们使用justify-content属性并将其值设置为center，使内部的div在容器中水平对齐。三个.box div的样式与前面的示例相似，但我们不再需要display: inline-block，而是通过使用flexbox实现水平对齐。

兼容性考虑

当使用这两种方法时，需要注意旧版本的浏览器的兼容性。特别是IE9及更早版本不支持flexbox布局。为了兼容这些浏览器，可以使用CSS属性float来实现水平对齐。下面是一个示例：

<style>
    .container {
        text-align: center;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: gray;
        margin: 10px;
        float: left;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

在上面的代码中，我们将.box div的float属性设置为left，以实现水平对齐。并且我们需要将.container容器的text-align属性设置为center，以使内部的div在容器中水平对齐。请注意，这种方法在现代浏览器中仍然有效，但不推荐在需要考虑旧版本浏览器的情况下使用。

总结

通过使用CSS的display: inline-block和flexbox布局，我们可以轻松地实现水平对齐div，而无需使用浮动。display: inline-block适用于少量div的情况，而flexbox布局适用于需要更灵活和自适应的布局。在选择使用哪种方法时，还需要考虑兼容性问题，并根据需要进行适当的调整。

希望本文对你理解如何在CSS中水平对齐div有所帮助。无论是在构建简单网页还是复杂web应用程序，掌握水平对齐div的技巧都是非常重要的。通过选择适当的CSS属性和技术，你可以轻松地创建出美观和专业的布局。