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).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |