css居中显示

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;

}

```

以上是几种常见的CSS居中显示的方法，通过这些方法可以实现不同情况下的居中布局。