Super centered
Use place-items: center
to center an element within its parent.
First specify grid as the display method, and then write place-items: center
on the same element. place-items
is a shorthand to set both align-items
and justify-items
at once. By setting it to center
, both align-items
and justify-items
are set to center
.
.parent {
display: grid;
place-items: center;
}
This enables the content to be perfectly centered within the parent, regardless of intrinsic size.
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-02-24 UTC.
[null,null,["Last updated 2025-02-24 UTC."],[],[]]