Sarathlal N

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%;
}

Looking for a skilled developer? I'm currently available for freelance, contract, or full-time remote opportunities! Let's create something amazing together. Send me a quick message, and I'll respond within 24 hours!

Recent Posts

  1. SQL From Basics to Mastery — A Complete, Hands-On Guide
  2. WordPress Beginner Interview Questions
  3. Mastering Traits in PHP - The Complete Guide for Code Reuse and Modularity
  4. Understanding the Singleton Pattern and Using Traits to Achieve Singleton in WordPress Plugin Development
  5. REST API Methods Explained with Best Practices for Building Clean and Secure APIs

This article was published on

Your Questions / Comments

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