Center a div css
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Puzzled Penguin
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.container{
margin: 0 auto;
display: flex;
align-items: center;
}/* Assume the div has a class of "center"
The below would center it horizontally
*/
.center {
margin-left: auto;
margin-right: auto;
}
/* There is a shorthand and it is given below */
.center {
margin: 0 auto;
}.parent {
display : flex;
justify-content : center;
align-items : center;
}.parent {
justify-content : center;
align-items : center;
}