CSS里面div高度居中顯示

在CSS中，要使div元素高度居中顯示，可以通過(guò)多種方式實(shí)現(xiàn)，***常用的是使用flexbox布局。

我們需要給div元素的父元素添加flex屬性，使其成為flex容器，我們可以使用align-items屬性來(lái)垂直居中div元素。

.container {
  display: flex;
  align-items: center;
}

我們可以將div元素作為flex容器的子元素，即可實(shí)現(xiàn)高度居中顯示。

<div class="container">
  <div>內(nèi)容</div>
</div>

除了使用flexbox布局外，我們還可以使用position屬性來(lái)將div元素固定在父元素的中心位置。

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

上述代碼中，我們通過(guò)將div元素的top和left屬性設(shè)置為50%，將其固定在父元素的中心位置，我們使用transform屬性來(lái)微調(diào)div元素的位置，使其居中顯示。

除了以上兩種方法外，還有其他方式可以實(shí)現(xiàn)div元素高度居中顯示，使用flexbox布局和position屬性是***簡(jiǎn)單、***方便的方法。