Centering vertically and horizontally without worrying about height or width
suggest changeThe 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!
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents