Centering a DIV on screen using translate() transforms property with percentage values

There is a simple method to center an element on screen in CSS3. We are going to use translate() transforms property in CSS3 for this quick hack.

.center {
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 width: 48%;
	 height: 59%;
}

Need Help?

Do you need any help on CSS3 & CSS? I'm happy to help you.

Contact Me

Recent Posts

  1. Update query order - WordPress
  2. Display featured products - WooCommerce
  3. Remove "Category:", "Tag:", "Author:" from the_archive_title - WordPress
  4. The essential & basic WP-CLI commands for a WordPress developer
  5. Install theme unit test data using WP-CLI - WordPress


Questions / Comments

If you found this article interesting, found errors, or just want to discuss about them, please get in touch.