CSS
centering-a-div
Centering a Div
You will learn to center an item in 4 different ways.
Flexbox
.container {
display: flex;
justify-content: center;
align-items: center;
}
Gridbox I
.container {
display: grid;
justify-content: center;
align-items: center;
}
Gridbox II
.container {
display: grid;
place-items: center;
}
Position
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Margin
div {
width: 1500px;
margin: auto;
}
When using Position or Margin for centering, we need to target the element not it's parent element.