Several ways to vertically and horizontally center in CSS3 with indefinite height and width

1. Flex layout

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

This method is not compatible

2. Position + transform

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

IE9 and below do not support the transform attribute

3. table + table-cell

.father {
    display: table;
}
.son {
    display: table-cell;
    vertical-align: middle;
      text-align: center;
}

4. :before + display:inline-block

.father {
  text-align: center;
}
.father::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.son {
  display: inline-block;
}

This concludes this article about several ways to use CSS3 variable height and width vertical and horizontal centering. For more information about CSS3 variable height and width vertical and horizontal centering, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!