Centering vertically and horizontally without worrying about height or width

suggest change

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

The inner container

The content box



<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!


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!

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents