How does css center the child element vertically when the parent element has an indefinite width and height?

some of the methods seen on the Internet are the height setting of the parent element or the child element, and there is no way to achieve the effect without setting the width and height of both?

Css
Mar.16,2021

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

or flexible layout, compatibility

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

parent element text-align: center; , child element up and down padding , for example, li and button in the line of the watch button in the upper right corner of this page, the text of the watch button button is vertically centered by writing padding , and li adds a text-align: center; to it.


you can also consider setting the parent element to display: table-cell; text-align: center

.
Menu