DEV Community

Cover image for Hack the ways to center align any text / image / element in CSS

Hack the ways to center align any text / image / element in CSS

Chayti on January 08, 2023

CSS এ alignment set করাটা একটু tricky মনে হতে পারে। 🥲 🥲 For example: কোনও block level element কে (suppose, h1) center এ আনার জন্য text-align : cent...
Read full post
Collapse
 
pengeszikra profile image
Peter Vivo • 
.center {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

One more for centering both horizontally and vertically -
.centered{
height:100vh;//You can put any other value as height
display:grid;
place-items:center;
}

Collapse
 
pritom627 profile image
Pritom Acharya •

Very helpful.

Collapse
 
joysaha23 profile image
Joy Saha •

very helpful...!❤

Collapse
 
themihir profile image
Mihir Das •

Thanks a lot.

Collapse
 
dexcoder9 profile image
deXcoder9 •

thanks its very helpful

Collapse
 
pritom627 profile image
Pritom Acharya •

Thank you very much ma'am. I am a beginner on Web Development, and this thing was very difficult for me. Please make more articles about HTML and CSS so I can note them down. Thank you.

Collapse
 
naeemulislam profile image
Naeemul Islam •

Very helpful and informative..

Collapse
 
rakibhossainhowlader profile image
Rakib-hossain-howlader •

thanks

Collapse
 
habibullahakhand profile image
Md Habibullah Akhand •

thanks apu

Collapse
 
marjanhasan profile image
Marjan •

Thanks a ton for make it easy

Collapse
 
syedashiqbd profile image
Syed Ashiq •

Thanks a lot for this informative article, which we are bound to easily understand.

Collapse
 
mdarh411 profile image
Abdur Razzaque •

আমার মাথা এখনো ঘুরতেছে। তবে হেল্পফুল এই পোস্টটি। প্রয়োজনের সময় কিভাবে খুজে পাবো জানিনা। থ্যাংক ইউ ফর শেয়ার উইথ আস।

Collapse
 
dabarshi profile image
dabarshi •

Bookmark it.

Collapse
 
hamzaaryansapnil profile image
HamzaAryanSapnil •

PHero

.content {
position: absolute;
left: 50%;
top: 50%;
text-align: center;
transform: translate(-50%, -50%);
}

Maam may I ask a question?
why are we aligning text in the center here? when we have position absolute top 50 and left 50%

Collapse
 
chayti profile image
Chayti •

I have just given a way to solve it. It may have many solutions. Feel free to use your comfort zone while code.

Collapse
 
alaminarchie profile image
AL Amin •

Nice this content. helpful