Dynamically Centering HTML Elements With CSS Positioning and Transform/Translate
CSS positioning can be very tricky, elements and their styles can interact in complex ways producing unexpected behavior. Even something simple like centering content can be a hassle for novice developers. I
n this article I’ll be outlining some of the basic rules regarding the CSS position and transform properties. By the end of the tutorial you will be able to dynamically center an element within it’s parent.
CSS Position
The Position property defines how content is laid out on the screen. There are seven values the position property can take. But we only need to use the relative property to center a child within it’s parent. Check out the example below:
<!--- HTML -->
<div>
<div class="child">
Check out the Corey's Corner Podcast
Learn how to build a Rails E-Commerce App
Meta Programming Rails Test !!
</div>
</div>/* CSS */
.child{
background-color: #F00;
position: relative;
}
According to the Mozilla Developer Docs relative positioning value positions the element relative to its normal position. By giving values to the top,right,bottom and left properties we can move the element in any direction The starting point or origin of that movement is from where the element is normally positioned.
Note that giving a value to one of these positions moves the element away from that direction. For example if we give top a value of 10px it will move a relatively positioned element 10px from the top of its normal position.
If this is confusing just think of the directions as their opposites. For example if you want to move an element down use the top property or if you want to move an element to the right use the left property, and vice versa
To center our element add the following to your CSS:
.child{
background-color: #F00;
position: relative;
top: 50%;
left: 50%;
}Wait this doesn’t look right, our element is a little off from the center of it’s parent. If you look closely the top-left corner of our child is centered directly within its parent, but why?
The CSS direction properties don’t move elements from their center, instead they use the top left corner. Similarly an HTML document doesn’t start in the center, it starts in the top left corner.
We could play around with the top and left values until we manage to center our elem, but that would be of no real use because the content would not be centered dynamically and would probably be just a little off. Instead we need to introduce the Transform property and the Translate function.
Introducing Transform/Translate
The CSS Transform property is very powerful, it can move elements, rotate them, skew them and a whole lot more. But to center our element dynamically we only need to understand the Translate function.
According to the Mozilla Docs the Translate function is used to “positions an element in the horizontal and/or vertical directions.”. By using translate we can move an element in the X or Y direction, the direction(s) are based on vector values, negative values are towards the bottom and right whilst positive values are towards the top and left. The basic syntax of translate is as follows
translate(Xval, Yval);
/* -Y Move towards the bottom
+Y Move towards the Top-X == Move to the Right
+X == Move to the Left*/
You might be thinking that this is the exact same thing as the normal CSS direction properties, and usually it is until we pass percentage values in as arguments. When you pass in a percent value to the translate property it will move the element in that direction based on it’s own height or width.
Ultimately this means that if the width or height of our element changes the translate function can dynamically move it around the screen. For example if you had a div element with a height of 300 pixels and a width of 200 pixels and used translate like so:
transform: translate(-50%, -50%);You would be moving the element to the left by 50% of the elements width ie. to the left by 100 pixels and towards the bottom by 50% of it’s height ie. 150 pixels.
Thus to center our content our final styles should look like:
.child{
background-color: #F00;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}Thanks for reading, I hope you learned something! To learn more about Programming be sure to check out my Beginners Ruby Meta Programming Tutorial, And don’t forget to listen to Corey’s Corner, Thanks !
Corey’s Corner Podcast: https://anchor.fm/coreys-corner
Gardner App Development: https://gardnerappdev.com
Get Yoked 🍳 https://thoughtsandfitness.com
