[分享]css不定宽高垂直居中

在进行网页布局时，经常会遇到元素不定宽高需要垂直居中的情况，下面介绍几种实现方法。方法一：绝对定位+负margin.parent { : relative; } .child { : absolute...

在进行网页布局时，经常会遇到元素不定宽高需要垂直居中的情况，下面介绍几种实现方法。

方法一：绝对定位+负margin

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

这种方法需要父元素设置为position: relative，子元素设置为position: absolute，并且通过top、left属性将元素移动到父元素的中心，再用transform属性将元素向左上移动其自身宽度和高度的一半，从而实现垂直居中。

方法二：flex布局

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

使用flex布局可以轻松实现水平和垂直居中。首先将父元素设置为display: flex，再通过align-items和 justify-content属性分别将元素在垂直和水平方向上居中。

方法三：table布局

.parent {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}
.child {
  display: table-cell;
  vertical-align: middle;
} 

使用table布局也可以实现垂直居中。首先将父元素设置为display: table，再将高度和宽度设置为100%，使其占据整个屏幕，最后通过text-align属性将元素水平居中，而子元素通过display: table-cell和vertical-align属性实现垂直居中。

以上三种方法都可以实现css不定宽高垂直居中，具体选择哪种方法可以根据具体情况进行选择。