13 Ways You Can Vertically Center Content in CSS
It was always a struggle to center items in the vertical axis, whether we were trying to position an icon or image beside the text, build one of those popular "hero" banners, or a modal overlay. Vertical centering components in CSS is not the easiest task, despite the fact that it is conceptually straightforward. This was especially true before modern CSS elements like flex and grid were supported by browsers.