Cheatography
Login Register

Five ways to center DIV element in CSS Cheat Sheet

A Programming › CSS cheat sheet in English by rahilkasimi

Five ways to center DIV element in CSS

CSS HTML Center
3,960 views 814 downloads 16 May 2022 History
PRs
Download

Five ways to center <DI­V> element in CSS

USING
CODE
Using flexbox
.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}
Using grid
.parent{
    display: grid;
    place-content:center;
}
Using position
.parent{
    position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    transform: transl­ate­(-50%, -50%)
}
Using grid & margin
.parent{
    display:grid;
}
.child{
    margin:auto;
}
Using flex & margin
.parent{
    display:flex;
}
.child{
    margin:auto;
}

Badges

Downloaded from Unusual Locations × 1

Comments

No comments yet.

Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.