1. 文本内容水平居中
在CSS中设置文本内容水平居中，常用的方式是将文本所在的容器设置为块级元素，然后给容器设置margin属性的值为"auto"，再设置文本的对齐方式为居中即可。
.container{
display: block; /*将容器设置成块级元素*/
width: 200px;
margin: 0 auto; /*设置容器水平居中*/
text-align: center; /*设置文本居中*/
}
以上代码中，我们先将容器设置为块级元素，然后设置容器的宽度为200px，通过设置margin的值为"0 auto"，让容器水平居中。最后，设置容器内文本的对齐方式为居中即可。
1.1 水平居中一个内联元素
对于内联元素，使用以上方式无法实现居中效果。此时可以将内联元素包裹在一个块级元素中，并对该块级元素进行水平居中处理。例如，我们想要实现水平居中一段文本：
<p class="text">hello world</p>
我们可以通过将该段文本所在的p元素设置为块级元素，并对其进行水平居中处理来实现文本水平居中的效果。
.text{
display: block; /*将内联元素转为块级元素*/
text-align: center; /*设置文本居中*/
}
1.2 水平居中一个图片
想要实现图片水平居中，则可以将图片包裹在一个div元素中，并将该div元素设置为块级元素，并对其进行水平居中处理。如下所示：
<div class="image-container">
<img src="image.jpg">
</div>
.image-container{
display: block; /*将容器设置成块级元素*/
width: 200px; /*设置容器宽度*/
margin: 0 auto; /*设置容器水平居中*/
}
2. 文本内容垂直居中
除了水平居中，有时也需要将文本内容垂直居中。在CSS中，有多种方式可以实现文本内容垂直居中。下面介绍其中一种常用的方式。
2.1 使用table-cell实现垂直居中
使用table-cell布局可以较为方便地实现元素内容的垂直居中。我们可以将文本内容放在一个块级元素中，并将该元素的display属性设置为table-cell，然后通过设置vertical-align属性的值为middle来实现垂直居中效果。例如：
.container{
height: 200px; /*设置容器高度*/
display: table-cell; /*将容器设置成表格单元格*/
vertical-align: middle; /*垂直居中*/
}
以上代码中，我们设置了一个高度为200px的块级元素，将该元素的display属性改为table-cell，并且设置了vertical-align的值为middle，这样就可以实现垂直居中效果了。
2.2 使用Flex布局实现垂直居中
使用Flex布局也可以实现文本内容的垂直居中。在容器上设置display:flex属性，并设置align-items属性的值为center，即可实现垂直居中效果。例如：
.container{
height: 200px; /*设置容器高度*/
display: flex; /*使用Flex布局*/
align-items: center; /*设置垂直居中*/
}
以上代码中，我们设置了一个高度为200px的块级元素，将该元素的display属性设置为flex，并且设置了align-items属性的值为center，这样就可以实现容器内文本内容的垂直居中效果了。
3. 文本内容水平垂直居中
除了单独实现文本内容的水平或垂直居中，有时候我们还需要将文本内容同时水平和垂直居中。在CSS中，使用绝对定位可以较为方便地实现文本内容的水平和垂直居中。下面举例说明：
<div class="container">
<p class="text">hello world</p>
</div>
.container{
position: relative; /*设置容器为相对定位*/
width: 200px; /*设置容器宽度*/
height: 200px; /*设置容器高度*/
}
.text{
position: absolute; /*设置文本为绝对定位*/
top: 50%; /*向上偏移50%*/
left: 50%; /*向左偏移50%*/
transform: translate(-50%,-50%); /*通过transform将文本向上向左偏移50%*/
}
以上代码中，我们将容器设置为相对定位，并设置容器的宽度和高度。然后，将文本内容所在的p元素设置为绝对定位，将top和left的属性值都设置为50%，这样文本就被移到了容器的中间位置。最后，使用transform向上和向左偏移50%，即可将文本内容水平和垂直居中。
3.1 使用Flex布局实现水平垂直居中
除了使用绝对定位实现文本内容的水平垂直居中外，使用Flex布局也可以实现相同的效果。使用Flex布局的好处是可以动态地调整容器的尺寸，而且代码也较为简洁。示例代码如下：
.container{
display: flex; /*使用Flex布局*/
justify-content: center; /*将元素水平居中*/
align-items: center; /*将元素垂直居中*/
}
以上代码中，我们将容器设置为Flex布局，并设置了justify-content和align-items的属性值为center，这样就可以将容器内的文本内容水平和垂直居中了。
4. 总结
本文介绍了在CSS中如何实现文本内容的水平和垂直居中。具体来说，我们可以使用margin属性、table-cell布局、Flex布局以及绝对定位等方式来实现。在实际应用中，我们可以根据实际需求选择合适的方式来实现文本内容的居中效果。