- Published on
How to center Div using CSS?
![How to center Div using CSS?](https://user-images.githubusercontent.com/33494971/269602373-9aa20fcb-72ca-49ca-902c-e5866a74bf0e.png)
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%)
}