Center with CSS only / Welcome to Signl

Center with CSS only

Richiphone
Posted 1 month ago
View Profile

To center an object, either in "absolute" or "relative" position, we will only have to apply a simple style to the object that we want to center.

This would be the rule to center the object in the middle of the browser screen:

#objet{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

And if we want to center the object inside another parent object, we must give this parent object a "relative" position:

#parent{
position:relative;
}

#objet{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Example:

jsfiddle


Must be logged in to comment

Discover more