Center an element vertically in CSS

CSS Web Development Front End Technology

To center an element vertically in CSS, use top and bottom padding.

Example

You can try to run the following code to center an element

<!DOCTYPE html>
<html>
   <head>
      <style>
         .center {
            padding: 50px 0;
            border: 2px solid blue;
         }
      </style>
   </head>
   <body>
      <h2>Center Vertically</h2>
      <p>In this example, we use the padding property to center the div element vertically:</p>
      <div class = "center">
         <p>I am vertically centered.</p>
      </div>
   </body>
</html>