CSS居中显示是网页开发中常用的布局技巧之一，可以使元素在父容器中水平或垂直居中显示。以下是几种常见的CSS居中显示的方法。
一、水平居中
1. 文本居中：使用text-align属性来居中元素中的文本内容。
```css
.container {
text-align: center;
}
```
2. 块级元素居中：使用margin属性来实现水平居中。
```css
.container {
margin-left: auto;
margin-right: auto;
}
```
3. flex布局居中：使用flex布局的justify-content属性来实现居中。
```css
.container {
display: flex;
justify-content: center;
}
```
4. 表格居中：使用table布局的margin属性来实现居中。
```css
.container {
display: table;
margin-left: auto;
margin-right: auto;
}
```
二、垂直居中
1. 行内元素垂直居中：使用line-height属性来实现行内元素的垂直居中。
```css
.container {
line-height: /* 父容器高度 */;
}
```
2. 块级元素垂直居中：使用absolute定位和transform属性来实现垂直居中。
```css
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
```
3. flex布局垂直居中：使用flex布局的align-items属性来实现垂直居中。
```css
.container {
display: flex;
align-items: center;
}
```
4. 表格居中：使用table布局的display属性来实现居中。
```css
.container {
display: table-cell;
vertical-align: middle;
}
```
QQ客服