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

Recent Posts

1. Automating Release Generation with GitHub Actions
2. WP CLI Commands to Bulk Delete Entries in WordPress Database
3. Split a Single CSV File into Multiple Files Using the Split Command - Bash
4. Migrating code repo from BitBucket to GitHub
5. Streamlining Development - Our Journey with Git, Bitbucket, and Jira

This article was published on January 4, 2015

Your Questions / Comments

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