सीएसएस के साथ डिव्स में बड़े आकार की छवियों को केंद्रित करना

फ्लुइड लेआउट से निपटते समय जहां छवि कंटेनर की चौड़ाई अलग-अलग होती है, एक डिव के भीतर एक बड़े आकार की छवि को केंद्रित करना बन जाता है एक चुनौती. पारंपरिक सीएसएस विधियां, जैसे मार्जिन-लेफ्ट और मार्जिन-राइट को ऑटो पर सेट करना, केवल उनके आसपास के डिव से छोटी छवियों के लिए काम करती हैं।

इस समस्या के समाधान के लिए, निम्नलिखित सीएसएस समाधान पर विचार करें:

.parent {
    position: relative;
    overflow: hidden;
    // Optional height and width settings based on the desired design
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

यह दृष्टिकोण सुनिश्चित करता है कि कोई भी छवि, आकार की परवाह किए बिना, अपने मूल प्रभाग के भीतर क्षैतिज और लंबवत दोनों तरह से केंद्रित होगी। नकारात्मक शीर्ष, नीचे, बाएँ और दाएँ मान अनिवार्य रूप से छवि को मूल स्थान के भीतर संपूर्ण स्थान भरने के लिए बाध्य करते हैं, और मार्जिन: ऑटो नियम इसे उस स्थान के भीतर केंद्रित करता है।

किसी भी तत्व को छिपाकर जो परे बहता है पैरेंट डिव ओवरफ्लो का उपयोग करते हुए: छिपा हुआ, बड़े आकार की छवि दोनों किनारों पर समान रूप से कट जाएगी, जिससे वांछित केंद्रित प्रभाव पैदा होगा।