DEV Community

Cover image for How to set element center with transform property in CSS
🚩 Atul Prajapati 🇮🇳
🚩 Atul Prajapati 🇮🇳

Posted on Edited on

How to set element center with transform property in CSS

Hey, whassup coding people

hope you all doing little or progress in your professional journey.

Actually, this post is a part of our 20 day CSS animation post.

And in this post, we will learn about "How to set element centre with transform property".

there are just 4 lines of code which is this

  • top: 50%;
  • left: 50%;
  • transform: translate(-50%, -50%);
  • position: fixed;

Not clear, see the whole picture

And if you guys interested in my free website templates please download them here 👉 AtulCodex Marketplace 🏪.

Top comments (2)

🔴 Hot News: atulcodex/how to set element center with transform property in css e - สรุปดราม่าล่าสุด
 
afif profile image
Temani Afif • • Edited

Or we can use

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
🔴 Hot News: atulcodex/how to set element center with transform property in css e - สรุปดราม่าล่าสุด 🔴 Hot News: atulcodex/how to set element center with transform property in css e - สรุปดราม่าล่าสุด

And shortly only

inset:0;
margin:auto;
🔴 Hot News: atulcodex/how to set element center with transform property in css e - สรุปดราม่าล่าสุด 🔴 Hot News: atulcodex/how to set element center with transform property in css e - สรุปดราม่าล่าสุด
🔴 Hot News: atulcodex/how to set element center with transform property in css e - สรุปดราม่าล่าสุด
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳 •

Yeah sure, hey temani thanks for sharing this code 💐