本篇文章给大家带来《css怎么让div居中显示》，石家庄人才网对文章内容进行了深度展开说明，希望对各位有所帮助，记得收藏本站。

在CSS中，让div居中显示是一个常见的需求，可以通过多种方式实现。本文将介绍几种常用的方法，帮助您轻松实现div的水平居中和垂直居中。

1. 水平居中

(1) 使用 text-align: center;

如果要将一个块级元素相对于其父元素水平居中，可以使用 `text-align: center;` 属性。需要注意的是，该属性需要设置在父元素上，而不是要居中的元素上。

```css.parent { text-align: center;}```

(2) 使用 margin: auto;

如果要将一个块级元素相对于其父元素水平居中，并且该元素具有固定的宽度，则可以使用 `margin: auto;` 属性。该属性会将元素的左右边距设置为相等的值，从而实现水平居中。

```css.child { width: 200px; margin: 0 auto;}```

2. 垂直居中

(1) 使用 line-height 属性

如果要将单行文本垂直居中，可以使用 `line-height` 属性。将 `line-height` 设置为与元素的高度相同即可。

```css.parent { height: 100px; line-height: 100px;}```

(2) 使用 position: absolute 和 transform 属性

如果要将一个元素相对于其父元素进行垂直居中，可以使用 `position: absolute` 和 `transform` 属性。将元素的 `top` 和 `left` 属性设置为 50%，然后使用 `transform: translate(-50%, -50%);` 将元素向上和向左移动自身宽度和高度的一半。

```css.parent { position: relative;}

.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}```

(3) 使用 Flexbox 布局

Flexbox 布局提供了一种更灵活的方式来实现元素的居中。将父元素的 `display` 属性设置为 `flex`，然后使用 `align-items: center;` 将子元素垂直居中。

```css.parent { display: flex; align-items: center;}```

3. 水平垂直居中

(1) 使用 position: absolute 和 margin: auto;

将元素的 `position` 属性设置为 `absolute`，然后将 `top`、`right`、`bottom` 和 `left` 属性都设置为 0，并将 `margin` 属性设置为 `auto`。

```css.parent { position: relative;}

.child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}```

(2) 使用 Flexbox 布局

将父元素的 `display` 属性设置为 `flex`，然后使用 `justify-content: center;` 将子元素水平居中，使用 `align-items: center;` 将子元素垂直居中。

```css.parent { display: flex; justify-content: center; align-items: center;}```

(3) 使用 Grid 布局

将父元素的 `display` 属性设置为 `grid`，然后使用 `place-items: center;` 将子元素水平垂直居中。石家庄人才网小编提示，这是一种非常简洁的实现方式。

```css.parent { display: grid; place-items: center;}```

石家庄人才网小编对《css怎么让div居中显示》内容分享到这里，如果有相关疑问请在本站留言。