Gotchasīecause we've used absolute posoitioning, there's a chance the content will grow to overflow the parent, even if like in the demo the parent has a min-width which typically grows with the content except for absolute children.

This results in a centered appearance that scales with the content. In this example, we use shorthand to apply both x and y values to translate().Ībsolute positioning takes an element out of normal document flow after which we can apply precise values (as needed) to control its positioning in the document, or in this case, relative to the parent with the required position: relative on the parent element.Īfter absolutely positioning the child from the top 50% and left 50%, which is 50% of the parent's height and width, respectively, we then use translate(-50%, -50%) to pull the child back up 50% of its own height and back left 50% of its own width. This combo works because when a percentage value is supplied to a translate definition, it based the percentage on the computed width ( translateX) or height ( translateY).

Display flex horizontal align