- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
- Related Articles
- How to center an element vertically and horizontally with CSS?
- How to center a button element vertically and horizontally with CSS?
- How can I vertically center a div element for all browsers using CSS?
- Center an image with CSS
- How to center an image with CSS?
- How to center an Image object vertically on current viewport of canvas using FabricJS?
- Center any element in Bootstrap
- Center image using text-align center with CSS?
- How to center an object vertically with respect to current viewport of canvas in IText using FabricJS?
- FabricJS – How to center a Line object vertically on canvas?
- How to center a Text object vertically on canvas using FabricJS?
- How to position text to center on an image with CSS
- How do I center text horizontally and vertically in a TextView of Android?
- How can I center text (horizontally and vertically) inside a div block?
- Center links in a Navigation Bar with CSS

Advertisements