Center an element vertically in CSS

CSSWeb DevelopmentFront 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

Live Demo

<!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

raja
Arjun Thakur
Published on 08-May-2018 12:19:33
Previous Page Print Page
Next Page  
Advertisements