CSS實現(xiàn)div垂直居中顯示

CSS中，實現(xiàn)div垂直居中顯示有多種方法，利用flexbox布局和position屬性是兩種常見的方法。

我們可以使用flexbox布局來實現(xiàn)div的垂直居中，具體方法是，將div的父元素設(shè)置為flexbox布局，然后利用align-items屬性將其子元素垂直居中。

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

在上面的代碼中，.parent為div的父元素，display: flex將其設(shè)置為flexbox布局，align-items: center則將其子元素垂直居中。

我們還可以使用position屬性來實現(xiàn)div的垂直居中，具體方法是，將div設(shè)置為***定位，然后利用top和bottom屬性將其上下位置固定，從而實現(xiàn)垂直居中。

.div {
  position: absolute;
  top: 50%;
  bottom: 50%;
}

在上面的代碼中，.div為需要垂直居中的div，position: absolute將其設(shè)置為***定位，top和bottom屬性則將其上下位置固定。

需要注意的是，以上兩種方法都適用于固定高度的div，如果div的高度不固定，那么需要采用其他方法來實現(xiàn)垂直居中，可以利用CSS的transform屬性來實現(xiàn)動態(tài)垂直居中，具體方法是，將div設(shè)置為相對定位，然后利用transform屬性將其向上移動一半的高度。

.div {
  position: relative;
  transform: translateY(-50%);
}

在上面的代碼中，.div為需要垂直居中的div，position: relative將其設(shè)置為相對定位，transform屬性則將其向上移動一半的高度。

CSS中實現(xiàn)div垂直居中顯示有多種方法，具體采用哪種方法需要根據(jù)實際情況進(jìn)行選擇。