This css snippet is for centering div in a web page

center.css

.centered_div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}
.centered_div {
width:500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
background: red;
}

There is another trick, if you don't know the width of a div
.centered {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}