学会这几种方法css居中很简单

学会使用 CSS 居中元素有多种方法，下面将介绍几种常用的居中布局方式。

一、水平居中布局：

1. 使用 margin 实现居中：

将需要居中的元素的左右 margin 设置为 auto，即可实现水平居中布局。如下所示：

```css

.center-horizontal {

margin-left: auto;

margin-right: auto;

}

```

2. 使用 flex 实现居中：

将父元素的 display 属性设置为 flex，并设置 align-items 和 justify-content 属性为 center，即可实现元素在水平方向上的居中。如下所示：

```css

.parent-container {

display: flex;

align-items: center;

justify-content: center;

}

```

3. 使用定位属性实现居中：

对需要居中的元素设置 position: absolute，并设置 left 和 right 属性为 0，再设置 margin-left 和 margin-right 为 auto，即可实现水平居中布局。如下所示：

```css

.center-horizontal {

position: absolute;

left: 0;

right: 0;

margin-left: auto;

margin-right: auto;

}

```

二、垂直居中布局：

1. 使用 line-height 实现文本的垂直居中：

将行高与元素的高度相等，即可实现文本在元素内垂直居中布局。如下所示：

```css

.center-vertical {

line-height: 60px; /* 元素高度为 60px */

}

```

2. 使用 table-cell 属性实现元素的垂直居中：

将父元素的 display 属性设置为 table，子元素的 display 属性设置为 table-cell，并设置 vertical-align 属性为 middle，即可实现元素在垂直方向上的居中。如下所示：

```css

.parent-container {

display: table;

}

.center-vertical {

display: table-cell;

vertical-align: middle;

}

```

3. 使用 flex 实现元素的垂直居中：

将父元素的 display 属性设置为 flex，并设置 align-items 和 justify-content 属性为 center，即可实现元素在垂直方向上的居中。如下所示：

```css

.parent-container {

display: flex;

align-items: center;

justify-content: center;

}

```

以上是几种常见的 CSS 居中布局方式，根据具体的需求可选择合适的方法进行实现。