← #98 Open a package's homepage or repo

Center an element vertically and horizontally

Topics: CSS

There're different ways to center a given element in both directions.

Using flexbox

.container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;

Using grid

.container {
display: grid;
place-content: center;

Using positions

We position the child element absolutely to the parent element.

.parent {
position: relative;
.child {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
Fix a typo or suggest an improvement
#100 Style index numbers of list items