सेंटरिंग तकनीकें

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

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

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

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

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

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

Absolute + transform

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

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

• place-items: center
• margin: auto auto
• text-align: center