Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Horizontally and vertically center div in a page
<!DOCTYPE html>
<html>
<head>
<title>The Center </title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<style>
html, body {
height: 100%;
}
body, button, input {
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 0.875rem;
color: #676a6c;
line-height: 1.75rem;
padding: 0 1.25rem;
margin: 0;
}
#grey-box{
background: #e4e4e4;
max-width: 570px;
margin: auto;
padding: 1.25rem;
border-radius: 5px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.content {
background: #f7f7f7;
padding: 1.25rem;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="grey-box">
<div class="content">
This div horizontally and vertically center
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment