# सेंटरिंग तकनीकें — सीएसएस

Source: https://www.geekswithgeeks.com/hi/css/css-centering

> हर स्थिति के लिए कंटेंट को बीच में लाने के तीन भरोसेमंद तरीके।

## फ्लेक्सबॉक्स सेंटरिंग

किसी भी संख्या और आकार के बच्चों के लिए काम करता है।

```css
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
```

## ग्रिड सेंटरिंग

`place-items: center` ग्रिड पर justify + align के लिए एक-पंक्ति का शॉर्टकट है।

```css
.center-grid {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
```

## Absolute + transform

पोज़िशन्ड पेरेंट के अंदर एक अकेले एलिमेंट के लिए: `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);` — यह तब भी काम करता है जब एलिमेंट का आकार अज्ञात हो।

**Quiz:** ग्रिड कंटेनर में बच्चों को बीच में लाने का सबसे छोटा तरीका कौन-सा है?

- [x] place-items: center
- [ ] margin: auto auto
- [ ] text-align: center

*Answer:* place-items: center. place-items: center एक ही डिक्लेरेशन में ग्रिड के बच्चों को दोनों अक्षों पर बीच में लाता है।