Super centered
bookmark_borderbookmark
Stay organized with collections
Save and categorize content based on your preferences.
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.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-02-24 UTC."],[],[]]