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. Move files recursively from source to remote server - SCP Command
  2. Brief about Magento 2 cache commands
  3. Magento 2 customer account password options
  4. Enable or disable maintance mode - Magento 2
  5. Replace string in multiple files - Command line


Questions / Comments

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