Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Horizontally and vertically center div in a page
<!DOCTYPE html>
<title>The Center </title>
<link href=",700" rel="stylesheet">
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;
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;
<div id="grey-box">
<div class="content">
This div horizontally and vertically center
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment