Example
The following technique allows you to add your content to an HTML element and center it both horizontally and vertically without worrying about its height or width.
The outer container
- should have
display: table;
The inner container
- should have
display: table-cell; - should have
vertical-align: middle; - should have
text-align: center;
The content box
- should have
display: inline-block; - should re-adjust the horizontal text-alignment to eg.
text-align: left;ortext-align: right;, unless you want text to be centered
Demo
HTML
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
You can put anything here!
</div>
</div>
</div>
CSS
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding: 20px;
border: 1px solid #000;
}
See also this Fiddle!
