सुपर केंद्रित

किसी एलिमेंट को उसके पैरंट में सेंटर करने के लिए, 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;
}