Computer >> Computer tutorials >  >> Programming >> CSS

Center an element vertically in CSS


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>

Output

Center an element vertically in CSS