-
-
Save electricg/21fc48220079487ee300 to your computer and use it in GitHub Desktop.
Vertical center
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width"> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body, html { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| p { | |
| padding: 0 30px; | |
| margin: 0; | |
| font-family: Georgia, serif; | |
| font-size: 100px; | |
| font-size: 8vw; | |
| box-sizing: border-box; | |
| line-height: 1.4; | |
| text-align: center; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0; | |
| transition: opacity 0.5s ease-in-out; | |
| filter: alpha(opacity=0); | |
| pointer-events: none; | |
| } | |
| .active { | |
| opacity: 1; | |
| filter: alpha(opacity=100); | |
| pointer-events: auto; | |
| } | |
| .technique-1 { /* the best one */ | |
| display: -webkit-flex; | |
| -webkit-align-items: center; | |
| -webkit-justify-content: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .technique-2 { | |
| height: auto; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| .technique-3 { | |
| display: table; | |
| } | |
| .technique-3 > span { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .technique-4 { | |
| vertical-align: middle; | |
| white-space: nowrap; | |
| } | |
| .technique-4::before { | |
| content: ''; | |
| height: 100%; | |
| width: 1px; | |
| margin-left: -1px; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .technique-4 span { | |
| display: inline-block; | |
| vertical-align: middle; | |
| white-space: normal; | |
| } | |
| .technique-5 { /* yeah, this one is weak */ | |
| font-size: 4vw; | |
| line-height: 100vh; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p class="technique-1 active">Vertical centering is impossible in CSS lol!</p> | |
| <p class="technique-2">No it isn't.</p> | |
| <p class="technique-3"><span>You can even do it in IE8. <!-- with an extra element, granted --></span></p> | |
| <p class="technique-4"><span>So go forth and vertically center all the things!</span></p> | |
| <p class="technique-5">(a mini-rant by <a href="http://twitter.com/jaffathecake">@jaffathecake</a>)</p> | |
| <script id="jsbin-javascript"> | |
| var els = document.querySelectorAll('p'); | |
| var showing = 0; | |
| setInterval(function() { | |
| // this is easier with classlist, but meh: | |
| els[showing].className = els[showing].className.replace(' active', ''); | |
| showing = (showing + 1) % 5; | |
| els[showing].className += ' active'; | |
| }, 4000); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width"> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <p class="technique-1 active">Vertical centering is impossible in CSS lol!</p> | |
| <p class="technique-2">No it isn't.</p> | |
| <p class="technique-3"><span>You can even do it in IE8. <\!-- with an extra element, granted --></span></p> | |
| <p class="technique-4"><span>So go forth and vertically center all the things!</span></p> | |
| <p class="technique-5">(a mini-rant by <a href="//twitter.com/jaffathecake">@jaffathecake</a>)</p> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">body, html { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| p { | |
| padding: 0 30px; | |
| margin: 0; | |
| font-family: Georgia, serif; | |
| font-size: 100px; | |
| font-size: 8vw; | |
| box-sizing: border-box; | |
| line-height: 1.4; | |
| text-align: center; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0; | |
| transition: opacity 0.5s ease-in-out; | |
| filter: alpha(opacity=0); | |
| pointer-events: none; | |
| } | |
| .active { | |
| opacity: 1; | |
| filter: alpha(opacity=100); | |
| pointer-events: auto; | |
| } | |
| .technique-1 { /* the best one */ | |
| display: -webkit-flex; | |
| -webkit-align-items: center; | |
| -webkit-justify-content: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .technique-2 { | |
| height: auto; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| .technique-3 { | |
| display: table; | |
| } | |
| .technique-3 > span { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .technique-4 { | |
| vertical-align: middle; | |
| white-space: nowrap; | |
| } | |
| .technique-4::before { | |
| content: ''; | |
| height: 100%; | |
| width: 1px; | |
| margin-left: -1px; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .technique-4 span { | |
| display: inline-block; | |
| vertical-align: middle; | |
| white-space: normal; | |
| } | |
| .technique-5 { /* yeah, this one is weak */ | |
| font-size: 4vw; | |
| line-height: 100vh; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var els = document.querySelectorAll('p'); | |
| var showing = 0; | |
| setInterval(function() { | |
| // this is easier with classlist, but meh: | |
| els[showing].className = els[showing].className.replace(' active', ''); | |
| showing = (showing + 1) % 5; | |
| els[showing].className += ' active'; | |
| }, 4000);</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, html { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| p { | |
| padding: 0 30px; | |
| margin: 0; | |
| font-family: Georgia, serif; | |
| font-size: 100px; | |
| font-size: 8vw; | |
| box-sizing: border-box; | |
| line-height: 1.4; | |
| text-align: center; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0; | |
| transition: opacity 0.5s ease-in-out; | |
| filter: alpha(opacity=0); | |
| pointer-events: none; | |
| } | |
| .active { | |
| opacity: 1; | |
| filter: alpha(opacity=100); | |
| pointer-events: auto; | |
| } | |
| .technique-1 { /* the best one */ | |
| display: -webkit-flex; | |
| -webkit-align-items: center; | |
| -webkit-justify-content: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .technique-2 { | |
| height: auto; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| .technique-3 { | |
| display: table; | |
| } | |
| .technique-3 > span { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .technique-4 { | |
| vertical-align: middle; | |
| white-space: nowrap; | |
| } | |
| .technique-4::before { | |
| content: ''; | |
| height: 100%; | |
| width: 1px; | |
| margin-left: -1px; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .technique-4 span { | |
| display: inline-block; | |
| vertical-align: middle; | |
| white-space: normal; | |
| } | |
| .technique-5 { /* yeah, this one is weak */ | |
| font-size: 4vw; | |
| line-height: 100vh; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var els = document.querySelectorAll('p'); | |
| var showing = 0; | |
| setInterval(function() { | |
| // this is easier with classlist, but meh: | |
| els[showing].className = els[showing].className.replace(' active', ''); | |
| showing = (showing + 1) % 5; | |
| els[showing].className += ' active'; | |
| }, 4000); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
From https://jsbin.com/honawo/edit?html,css,output