मिश्रण का केंद्र - सीएसएस-ट्रिक्स

मूल तत्व को मानते हुए position: relative;, ये चार गुण क्षैतिज और लंबवत दोनों तरह से एक बाल तत्व को केन्द्रित करेंगे, चाहे किसी की भी ऊंचाई कितनी भी हो।

@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); )

.parent ( position: relative; ) .child ( @include centerer; )

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन सेंटरर मिक्सिन देखें।

यद्यपि सावधान रहें कि यदि बाल तत्व केन्द्रित किया जा रहा है तो माता-पिता की तुलना में लंबा है, शीर्ष काट दिया जा सकता है।

शौक़ीन

यदि आप केवल एक ही दिशा में केंद्र करने में सक्षम होना चाहते हैं ...

@mixin centerer($horizontal: true, $vertical: true) ( position: absolute; @if ($horizontal and $vertical) ( top: 50%; left: 50%; transform: translate(-50%, -50%); ) @else if ($horizontal) ( left: 50%; transform: translate(-50%, 0); ) @else if ($vertical) ( top: 50%; transform: translate(0, -50%); ) )

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन yybgZd देखें।