css如何在父元素不定宽高子元素不定宽高的情况下让子元素垂直居中？

Question

网上看到的一些方法都是父元素定高，或者子元素定高的，都没有两者都不设置宽高达到效果的方法？

Answer 1

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

或者弹性布局,兼容性差点

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

Answer 2

父元素设置text-align: center;，子元素设个上下padding，例如本页面右上角的关注按钮那行的li和button,关注按钮button的文字是写的padding实现的垂直居中，li上面添加个text-align: center;，关注那块按钮包括文字就左右居中了，然后整体效果就上下左右居中了。

Answer 3

也可以考虑将父元素设置为display: table-cell; text-align: center