css中使div自动对齐

CSS中可以使用`display`属性来控制div元素的对齐方式。`display`属性可以设置为以下几个值来实现不同的对齐效果。

1. `display: block;`：将div元素作为块级元素显示，会独占一行，并且会自动换行。块级元素默认宽度为父元素的100%。可以通过设置`width`属性来改变宽度。

示例代码：

<div style="display: block; width: 200px; background-color: red;">
  这是一个块级元素
</div>

2. `display: inline;`：将div元素作为内联元素显示，不会独占一行，可以与其他元素在同一行显示。内联元素的宽度由内容决定，无法设置宽度。

示例代码：

<div style="display: inline; background-color: blue;">
  这是一个内联元素
</div>
<div style="display: inline; background-color: green;">
  这是另一个内联元素
</div>

3. `display: inline-block;`：将div元素既作为内联元素又具有块级元素的特性，可以与其他元素在同一行显示，并且可以设置宽度和高度。

示例代码：

<div style="display: inline-block; width: 100px; height: 100px; background-color: yellow;">
  这是一个内联块级元素
</div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: orange;">
  这是另一个内联块级元素
</div>

4. `display: flex;`：使用弹性布局来对齐div元素。通过设置`flex-direction`、`justify-content`和`align-items`等属性，可以实现不同的对齐方式。

示例代码：

<div style="display: flex; justify-content: center; align-items: center; width: 300px; height: 200px; background-color: purple;">
  这是一个使用弹性布局的div元素
</div>

以上是常用的几种div对齐方式，通过设置不同的`display`属性，可以实现不同的布局效果。还可以结合其他CSS属性如`float`、`position`、`margin`和`padding`等来进一步调整布局样式。