किसी एलिमेंट को उसके पैरंट में सेंटर करने के लिए, place-items: center
का इस्तेमाल करें.
पहले ग्रिड को डिसप्ले के तरीके के तौर पर तय करें. इसके बाद, उसी एलिमेंट पर place-items: center
लिखें. align-items
और justify-items
को एक साथ सेट करने के लिए, place-items
शॉर्टहैंड है. इसे center
पर सेट करने पर, align-items
और justify-items
, दोनों center
पर सेट हो जाते हैं.
.parent {
display: grid;
place-items: center;
}
इससे कॉन्टेंट को पैरंट के हिसाब से, सही तरीके से सेट करने में मदद मिलती है. भले ही, उसका साइज़ कुछ भी हो.
एचटीएमएल
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
CSS
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}