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)

Collapse
 
afif profile image
Temani Afif • Edited

Or we can use

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
Enter fullscreen mode Exit fullscreen mode

And shortly only

inset:0;
margin:auto;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Yeah sure, hey temani thanks for sharing this code ๐Ÿ’