2024年5月11日发(作者:)

设置div内容居中

一、使用CSS的text-align属性。

text-align属性是CSS中用来控制文本水平对齐方式的属性,

但它也可以用来实现div内容的水平居中。我们只需要将div的

display属性设置为block,然后将其父元素的text-align属性设

置为center,就可以实现div内容的水平居中。

```css。

.parent {。

text-align: center;

}。

.child {。

display: block;

/ 其他样式 /。

}。

```。

通过上述代码,我们可以实现将子元素div的内容水平居中显

示。这种方法简单易行,适用于一些简单的布局需求。

二、使用CSS的flex布局。

flex布局是CSS3中新增的一种布局方式,它可以非常方便地

实现元素的居中显示。我们可以通过设置父元素的display属性为

flex,然后使用justify-content和align-items属性来实现内容

的水平和垂直居中。

```css。

.parent {。

display: flex;