Theory
Theory
Comments

Centering with transform: translate

In order to center one block inside another block, we usually use the classic combination of methods of positioning and setting relative coordinates and negative margins.

This device works well when the centered block has fixed dimensions, but if its dimensions are changed, then there can be problems.

You can solve this problem using transforms and center the blocks with variable sizes. You do this with translate.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Centering with transform: translate</title> <meta charset="utf-8"> <link rel="stylesheet" href="world.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="world homeworld"> <div class="picture-frame large active"> <div class="picture"></div> </div> </div> </body> </html>

CSS

.picture { position: relative; width: 50%; height: 50%; }

Goalscompleted

Assign the left: 50% property to the .picture block.
And also assign the property top: 50%.
Then move it by setting translateX to -50%.
And shift it by -50% using translateY.

Centering with transform: translate

Comments

Log in

Sign up

Restore access