如何讓元素在父容器中垂直居中

一、使用flexbox

可以使用Flexbox布局實現垂直居中。在父元素上設置display: flex，並設置align-items: center屬性。這將使子元素垂直居中對齊。同時，可以利用justify-content: center屬性來實現子元素水平居中對齊。

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

二、使用絕對定位

可以使用絕對定位來實現垂直居中。在父元素上設置樣式position: relative屬性，同時設置子元素的top、left、bottom、right屬性都為0，再設置margin: auto實現子元素水平居中。

.parent {
  position: relative;
}

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

三、使用transform屬性

可以使用transform屬性來實現垂直居中。在父元素上設置position: relative屬性，然後設置子元素的position: absolute和top: 50%屬性，接着使用transform: translateY(-50%)屬性實現子元素垂直居中對齊。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

四、結合line-height屬性

可以結合line-height屬性實現垂直居中。在父元素內部設置line-height屬性，設置為父元素的高度，然後在子元素上設置屬性display: inline-block和vertical-align: middle即可實現子元素垂直居中對齊。

.parent {
  height: 200px;
  line-height: 200px;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

五、使用table布局

可以使用table布局來實現垂直居中。在父元素上設置display: table屬性，然後再設置子元素為display: table-cell，並設置屬性vertical-align: middle即可實現子元素垂直居中對齊。

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}