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
- Automating Release Generation with GitHub Actions
- WP CLI Commands to Bulk Delete Entries in WordPress Database
- Split a Single CSV File into Multiple Files Using the Split Command - Bash
- Migrating code repo from BitBucket to GitHub
- Streamlining Development - Our Journey with Git, Bitbucket, and Jira
Your Questions / Comments
If you found this article interesting, found errors, or just want to discuss about it, please get in touch.