在网页设计中，使文字居中展示是一个常见的需求。这不仅包括水平居中，还包括垂直居中。以下是一份详细的CSS攻略，帮助您实现文字的左右对齐和垂直居中。
一、水平居中
1. 使用text-align: center;
这是最简单也是最常用的方法，用于实现文字的水平居中。
.center-text {
text-align: center;
}
2. 使用margin: auto;
当容器宽度固定时，可以通过设置左右边距为自动来实现水平居中。
.center-text {
width: 300px;
margin: 0 auto;
}
3. 使用Flexbox
Flexbox是现代布局的强大工具，可以轻松实现水平居中。
.center-container {
display: flex;
justify-content: center;
}
二、垂直居中
1. 使用line-height
通过设置元素的line-height等于其高度，可以实现在单行文本中的垂直居中。
.center-text {
height: 100px;
line-height: 100px;
}
2. 使用display: table-cell
将父元素设置为display: table-cell，并使用vertical-align: middle;可以实现在多行文本中的垂直居中。
.center-container {
display: table;
width: 100%;
height: 200px;
}
.center-text {
display: table-cell;
vertical-align: middle;
}
3. 使用Flexbox
Flexbox同样可以用来实现垂直居中。
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
三、综合应用
将水平居中和垂直居中的方法结合起来，可以实现在容器中文字的完整居中。
.center-container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 200px;
}
四、注意事项
在使用line-height进行垂直居中时，确保文本的高度与line-height相同。
在使用Flexbox进行布局时，注意设置容器的display属性为flex。
在使用CSS进行布局时，注意元素的尺寸和边距设置。
通过以上攻略，您可以轻松实现网页上文字的左右对齐和垂直居中。希望对您有所帮助！