Skip to content

Instantly share code, notes, and snippets.

@Ashwinning

Ashwinning/VerticallyCentered.html

Created February 2, 2016 22:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ashwinning/f2bd95ea9c37a78d119d to your computer and use it in GitHub Desktop.
Save Ashwinning/f2bd95ea9c37a78d119d to your computer and use it in GitHub Desktop.
Download ZIP
Use this code to vertically and horizontally center something on a web page.
Raw
VerticallyCentered.html
<html>
<head>
<title>This page is under construction</title>
<style>
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 744px; /* Width should be the exact with of the div or image that you want to center */
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
<img src="http://ayaassociates.com/wp-content/uploads/2013/08/page_is_under_construction.jpg">
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment