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 WordPress/WooCommerce 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. REST API Methods Explained with Best Practices for Building Clean and Secure APIs
  2. My 28-Day Plan to Master Modern WordPress Development Using AI Tools
  3. Scaling WordPress - How Custom Database Tables Solve the Post Meta Bottleneck
  4. WordPress Transients Explained - A Developer's Guide to Site Performance
  5. Behind the Click - The Hidden Journey of Your Web Requests

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.