How css centers any element vertically

This article mainly introduces how css vertical center any element, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Center any element vertically

No, no! This is by no means dark magic, it can really center any element vertically:

Html,body {height: 100%; margin: 0;} body {- webkit-align-items: center;-ms-flex-align: center; align-items: center; display:-webkit-flex; display: flex;}

... And CSS Grid:

Body {display: grid; height: 100vh; margin: 0; place-items: center center;}

Isn't that enough? Vertical, horizontal? Any element, any time, any place? CSS-Tricks has a good article about a variety of centring techniques.

Note: IE11's support for flexbox is a bit bug.

Thank you for reading this article carefully. I hope the article "how to center css vertically in any element" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!