在前端开发中，经常会遇到需要将文本、图片或其他元素居中对齐的情况。这时候我们就需要学会使用 CSS 样式来实现居中对齐。一、文本居中对齐如果我们想要将一段文本居中对齐，可以使用 text-align 属性。

p {
text-align: center;
}

上面的代码中，我们将 p 标签文本居中对齐，即实现了文字居中的效果。二、图片居中对齐对于图片的居中对齐，有多种方案可供选择。以下是其中几种实现方式。1. display属性我们可以将图片设置为 “display: block”，然后再将其“margin: auto”。

img {
display: block;
margin: auto;
}

2. flex布局使用 flex 布局也可以实现图片的居中对齐。

.wrapper{
display: flex;
justify-content: center;
align-items: center;
}

上面代码中，我们使用了 display: flex 属性使父元素成为 flex 容器，然后通过 justify-content 和 align-items 属性将图片水平和垂直居中。三、其他元素居中对齐对于其他元素的居中对齐，我们也可以使用上面提到过的 display: flex 方式。

.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 200px;
height: 100px;
}

上面的代码中，我们使用了 display: flex 属性将 .wrapper 设为 flex 容器，通过 justify-content 和 align-items 将元素居中。其中， .content 用来表示要居中的元素。以上是 CSS 样式中居中对齐的几种方式，不同的应用场景可以使用不同的方式来实现效果。