Power of Transform Centering - Interactive Check out this CodePen! Please enable JavaScript to view this CodePen. Check out the demo version. <textarea class="modal" disabled></textarea> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { height: 100%; } body { position: relative; overflow: hidden; } .modal { width: 5em; min-width: 5em; max-width: 100%; height: 5em; min-height: 5em; max-height: 100%; border: 0; outline: none; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } View Full Code 🗓 published on 05 November 2014 ⤴️ also on CodePen ( Details, Full ) 🔗 shorturl repc.co/c4Yz2 code Have you published a response to this post?Learn how to send a Webmention or let me know the URL: You can also leave an anonymonous comment, thanks to Comment Parade. Responses Reactions: Replies: Please enable JavaScript to view Webmentions. Power of Transform Centering Category Hover Demo Mentioned this? Comments on CodePen All Posts Code Code Feed