Last active
January 12, 2019 04:58
-
-
Save burubur/5ca61ab95783a1b971d5ecd0a105cc6d to your computer and use it in GitHub Desktop.
Vertical Center with top & translateY
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 lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Document</title> | |
<style> | |
body{ | |
margin: 0; | |
} | |
.content { | |
min-height: 100vh; | |
background-image: linear-gradient(to bottom right, white, cyan) | |
} | |
.label { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
font-size: 2em; | |
text-align: center; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="content"> | |
<div class="label"> | |
Wellcome to NginX | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment