CSS

Centering Content

Horizontal centering

This is pretty straight forward and not an issue for consistent cross browser results. There are a couple of ways to horizontally center content. Skip ahead and read about vertical centering here.

text-align: center

Apply this declaration to the parent element and images and text will center. Note that the Text Block element does not center. However, all text and images are centered.

demo-1

Text Block

demo-1 CSS

.demo-1 {
    text-align: center;
}
.demo-1-img {
    width: 50%;
    max-width: 300px;
    margin: 20px;
}
.demo-1-text-block {
    display: block;
    width: 50%;
    max-width: 300px;
    margin-bottom: 20px;
    padding: 6px;
    background-color:#e6e6e6;
}

demo-1 HTML

<div class="demo-1">
    <img class="demo-1-img" src="/images/2015/05/kingston.jpg" />
    <div class="demo-1-text-block">Text Block</div>
</div>
display: inline-block

When the display property of the Text Block is set to inline-block, text align: center aligns the div element.

demo-1.1

Text Block

demo-1.1 CSS

.demo-1 {
    text-align: center;
}
.demo-1-img {
    width: 50%;
    max-width: 300px;
    margin: 20px;
}
.demo-1-text-inline-block {
    display: inline-block;
    width: 50%;
    max-width: 300px;
    margin-bottom: 20px;
    padding: 6px;
    background-color:#e6e6e6;
}

demo-1.1 HTML

<div class="demo-1">
    <img class="demo-1-img" src="/images/2015/05/kingston.jpg" />
    <div class="demo-1-text-inline-block">Text Block</div>
</div>

Apply this declaration to the element that you want to center. So, in order to center the Text Block, replace margin-bottom: 20px; with:

margin-top: 0;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;

Or with the shorthand equivalent: margin: 0 auto 20px auto;

demo-2 CSS

.demo-2 {
    text-align: center;
}
.demo-2-img {
    width: 50%;
    max-width: 300px;
    margin: 20px;
}
.demo-2-text-block {
    display: block;
    width: 50%;
    max-width: 300px;
    margin: 0 auto 20px auto;
    padding: 6px;
    background-color:#e6e6e6;
}

demo-2

Text Block

Absolute Positioned Element

To center a block level element, for example a div that has position:absolute and width:75%, use the following css:

left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

Vertical centering

This can be an issue for consistent cross browser results when IE 8 needs to be supported, especially when the height of the parent element varies. Here are a couple of ways to vertically center content.

Flexbox Sandbox Demo 3

This is the modern approach, a browser support table can be referenced at Can I use. If you don’t need to support IE9 or lower, you don’t need to use floated layouts with flexbox.

demo-3

Vertically and horizontally centered multi-line text in a dynamically sized responsive container.

demo-3 CSS

.centering-content-demo-3 {
    padding: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.demo-3-left,
.demo-3-right {
    padding: 10px;
    width: 50%;
}
.demo-3-left img {
    width: 100%;
}

demo-3 HTML

<div class="centering-content-demo-3">
    <div class="demo-3-left">
        <img src="/images/2015/05/kingston.jpg" />
    </div>
    <div class="demo-3-right">
        Vertically and horizontally centered multi-line text in a dynamically sized responsive container.
    </div>
</div>
display: table-cell

For browsers that do not support flexbox, using the same HTML as demo-3 above, display: table-cell with vertical-align: middle will work for IE 9, IE 8, Android 4.3 and 4.1.

demo-4 CSS

.centering-content-demo-4 {
    padding: 10px;
    align-items: center;
}
.demo-4-left,
.demo-4-right {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
    width: 50%;
}
.demo-4-left img {
    width: 100%;
}

demo-4

Vertically and horizontally centered multi-line text in a dynamically sized responsive container.

comments powered by Disqus