Center an element vertically in CSS

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


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

Live Demo

<!DOCTYPE html>
         .center {
            padding: 50px 0;
            border: 2px solid blue;
      <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>