Skip to content

Instantly share code, notes, and snippets.

@electricg

electricg/index.html

Forked from anonymous/index.html
Last active September 6, 2016 10:37
Show Gist options
  • Save electricg/21fc48220079487ee300 to your computer and use it in GitHub Desktop.
Save electricg/21fc48220079487ee300 to your computer and use it in GitHub Desktop.
Download ZIP
Vertical center
Raw
index.html
<!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>
Raw
jsbin.honawo.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;
}
Raw
jsbin.honawo.js
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);
@electricg
Copy link
Author

From https://jsbin.com/honawo/edit?html,css,output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment