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

你有没有遇到过这样的情况，就是需要在一个父元素中垂直居中一个不定宽高的子元素，但是却无从下手呢？这确实是一个很常见的需求，今天我们来学习一下如何实现。 首先，我们可以使用flex布局来实现这个需求：....

你有没有遇到过这样的情况，就是需要在一个父元素中垂直居中一个不定宽高的子元素，但是却无从下手呢？这确实是一个很常见的需求，今天我们来学习一下如何实现。

首先，我们可以使用flex布局来实现这个需求：

.parent {
  display: flex;
  align-items: center;   /* 垂直居中 */
} 

这个方法非常简单，只需要在父元素上添加display: flex; 和 align-items: center; 就可以啦，不过这个方法不兼容IE10及以下版本的浏览器。

其次，我们可以使用position和transform来实现：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;   /* 先让子元素的顶部距离父元素顶部50% */
  transform: translateY(-50%);   /* 再将子元素往上移自身高度一半的距离 */
} 

这里要注意的是父元素需要设置position: relative; 子元素需要设置position: absolute; 然后再把子元素的top值设为50%，这一步是让子元素的顶部距离父元素顶部50%，然后再使用transform: translateY(-50%); 把子元素往上移自身高度一半，以达到垂直居中的效果。

最后，我们可以使用网格布局来实现：

.parent {
  display: grid;
  place-items: center;  /* 完成水平和垂直居中 */
} 

这个方法也非常简单，只需要在父元素上添加display: grid; 和 place-items: center; 就可以啦，但同样不兼容IE10及以下版本的浏览器。

以上就是CSS不定宽高怎么垂直居中的方法介绍，我们可以根据自己的需求来选择适合自己的方法，让页面更好看，更加美观。