CSS Image Centering

किसी image को center करना trivial लगता है जब तक आपको असल में यह करने की ज़रूरत न पड़े — सही technique इस पर निर्भर करती है कि आप सिर्फ horizontally center कर रहे हैं, या एक known या unknown height वाले box के अंदर horizontally और vertically दोनों।

In this page:

margin: auto से Horizontal Centering
text-align से Centering
Flexbox Centering (दोनों Axes)
transform के साथ Absolute Positioning
Grid Centering

Syntax

css

img {
  display: block;
  margin: 0 auto;
}

margin: auto से Horizontal Centering

एक fixed width और margin: 0 auto वाली एक block-level image (display: block, जो images default रूप से नहीं होतीं) खुद को अपने containing block के अंदर horizontally center कर लेती है — यह सबसे पुरानी और सबसे simple centering technique है और basic cases के लिए अभी भी सही tool है।

Note:

Accepted values:
margin: 0 auto — किसी block को horizontally center करता है
margin-inline: auto — logical equivalent
display: block — images के लिए ज़रूरी, जो default रूप से inline हैं
width — container की width से कम होनी चाहिए

उदाहरण: Horizontal Centering with margin: auto

css

<style>
img {
  display: block;
  width: 150px;
  margin: 0 auto;
}
</style>
<img src="https://placehold.co/150x100" alt="Centered">

text-align से Centering

अगर किसी image को उसकी default inline/inline-block display पर छोड़ दिया जाए, तो उसे text-align: center वाले एक block-level parent में wrap करना उसे बिल्कुल वैसे ही horizontally center कर देता है जैसे यह text की एक line को center करता, image के अपने display या margin को छुए बिना।

Note:

Accepted values:
text-align: center — inline content को center करता है
text-align: left | right — दूसरे alignments
text-align: start | end — writing direction को follow करने वाला alignment
text-align: justify — lines को stretch करता है
नोट: image के parent पर लागू होता है, image पर नहीं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Centering with text-align

css

<style>
.wrap {
  text-align: center;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/150x100" alt="Centered like a line of text">
</div>

Flexbox Centering (दोनों Axes)

किसी container पर justify-content: center और align-items: center के साथ display: flex set करना उसके image child को एक साथ दोनों axes पर center कर देता है, और यह चाहे image या container की exact dimensions पहले से पता हों या न हों काम करता है।

Note:

Accepted values:
display: flex — एक flex container बनाता है
justify-content: center — main axis centering
align-items: center — cross axis centering
height — container को vertically center करने के लिए एक height चाहिए

उदाहरण: Flexbox Centering (Both Axes)

css

<style>
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/100x80" alt="Centered on both axes">
</div>

transform के साथ Absolute Positioning

किसी image को top: 50%; left: 50% पर absolutely position करना उसके top-left corner को container के center पर move करता है, और transform: translate(-50%, -50%) जोड़ना उसे फिर उसके अपने size के exactly आधे से वापस shift कर देता है — flexbox या grid के बिना उसे perfectly center करते हुए।

Note:

Accepted values:
position: absolute — इसे flow से बाहर ले जाता है
top: 50%; left: 50% — corner को center पर move करता है
transform: translate(-50%, -50%) — इसके अपने size के आधे से वापस खींचता है
position: relative — reference के तौर पर parent पर

उदाहरण: Absolute Positioning with transform

css

<style>
.wrap {
  position: relative;
  height: 150px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<div class="wrap">
  <img src="https://placehold.co/100x80" alt="Centered without flexbox">
</div>

Grid Centering

place-items: center वाला एक single-cell CSS Grid container अपने image child को एक declaration में दोनों axes पर center कर देता है, functionally flexbox approach के बराबर लेकिन इस specific single-item case के लिए अक्सर ज़्यादा concise माना जाता है।

Note:

Accepted values:
display: grid — एक grid container बनाता है
place-items: center — दोनों axes पर center करता है
place-content: center — पूरी grid को center करता है
min-height — vertically center करने के लिए चाहिए

उदाहरण: Grid Centering

css

<style>
.wrap {
  display: grid;
  place-items: center;
  height: 150px;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/100x80" alt="Centered in one declaration">
</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Modal Next Lesson → CSS Image Shapes

CSS Image Centering

margin: auto से Horizontal Centering

text-align से Centering

Flexbox Centering (दोनों Axes)

transform के साथ Absolute Positioning

Grid Centering

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code