Share HTML CSS to achieve horizontal and vertical center alignment
January 27, 2024
by Sienna Hart
No Comments
Horizontal and vertical centering with HTML CSS
These are the ones I find most common and convenient.
One. The first case is knowing the width and height of the child element
1. Use positioning position to realize horizontal and vertical center of the sub-box
Code:
Effect:
The second case is that the width and height of the child elements are not known
1. Position and transform are used to achieve this
Code:
Effect:
2. Use flex layouts for compatibility
Code:
Effect:
There are other ways to achieve center alignment, but these three are the easiest and most straightforward ones for me.
The first time to discover gold, A little nervous ha ha, I am not a god, just want to record and summarize their knowledge points in the process of learning.
