Published on

How to center Div using CSS?

How to center Div using CSS?

How to center Div using CSS?

There are different ways you can center a div using css, here are few of examples

Lets take an example of two divs one inside another -

<div class="parent">
  <div class="child"></div>
</div>

1. Using Flex

    .parent{
        display: flex,
        justify-content: center,
        align-items: center
    }

2. Using Grid

    .parent{
        display: grid,
        place-content: center,
    }

3. Using Positions

    .parent{
        position: relative,
    }
    .child{
        position: absolute,
        top: 50%,
        left: 50%,
        transform: translate(-50%, -50%)
    }