[分享]css中div在div居中显示

CSS 中的 div 作为常用块级元素，广泛应用于网页布局中。在实际开发中，我们经常需要将一个 div 元素居中显示在另一个 div 元素内部，这就需要运用 CSS 来控制居中位置。下面是一些常用的方...

CSS 中的 div 作为常用块级元素，广泛应用于网页布局中。在实际开发中，我们经常需要将一个 div 元素居中显示在另一个 div 元素内部，这就需要运用 CSS 来控制居中位置。下面是一些常用的方法。

/* 方法一：使用 text-align */
.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

/* 方法二：使用 margin */
.parent {
  position: relative;
}

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

/* 方法三：使用 flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: block;
} 

方法一是通过设置父级元素的 text-align 属性来实现。我们把子元素设置为内联块级元素，这样就可以在父元素内部居中显示。但是，这种方法只适用于水平居中显示，对于垂直居中操作比较麻烦。

方法二是通过相对定位和绝对定位来实现，我们把父元素设置成相对定位，把子元素设置成绝对定位。然后通过将子元素的左侧和上侧分别设置为50%来进行定位，使用 transform: translate(-50%, -50%) 来进行居中操作。这种方法同时适用于水平和垂直居中显示。

方法三是使用 Flexbox 布局，这是一种强大的布局方式，能够轻松处理居中操作。我们把父元素设置成 display: flex，并设置 justify-content: center 和 align-items: center 属性，分别用于水平和垂直居中子元素。

以上是几种常用的方法，根据不同的实际需求，我们可以选择不同的方法。在实际开发中，我们需要灵活运用 CSS 的各种属性来处理布局，让页面更加美观和实用。