How to center a div with CSS ?

One of the difficult things new web developers face is to center a div.

<body>
<div class=”center”>?</div>
</body>

The two methods I am going to show you are:

flexbox
grid

Using flexbox

.center{
d…

One of the difficult things new web developers face is to center a div.

<body>
 <div class="center">?</div>
</body>

The two methods I am going to show you are:

  1. flexbox
  2. grid

Using flexbox

.center{
    display: flex;
    align-items: center;
    justify-content: center;
}
  • align-items: center will make div vertically center.
  • justify-content: center will make div horizontally center.

Using Grid

.center{
    display: grid;
    place-items: center;
}

Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: