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
 
habibullahakhand profile image
Md Habibullah Akhand •

thanks apu

Collapse
 
rakibhossainhowlader profile image
Rakib-hossain-howlader •

thanks

Collapse
 
naeemulislam profile image
Naeemul Islam •

Very helpful and informative..

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
 
alaminarchie profile image
AL Amin •

Nice this content. helpful

Collapse
 
boduruddin profile image
Boduruddin Rana •

Thanks

Collapse
 
fh_limon360_11dfb22ef9fb6 profile image
FH Limon360 •

very helpful

Collapse
 
nazmul09ipe profile image
Nazmul Haque •

Insightful

Collapse
 
touhidulemroz profile image
Touhidul Islam Emroz •

Very helpful. thank you apu.

Collapse
 
mahbub_alom_7084 profile image
mahbub alom •

very helpful

Collapse
 
saurav_mondol_59aa93a1fb4 profile image
Saurav Mondol •

thanks

Collapse
 
mdarh411 profile image
Abdur Razzaque •

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

Collapse
 
dabarshi profile image
dabarshi •

Bookmark it.

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
 
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
 
md_touhid_75a5123d28d59cb profile image
Md Touhid •

sob bujlam but grid ta koi..?

Collapse
 
anikr311 profile image
Anik Hasan •

Thank you! This was great. I learned lot, now it's time to code.