CSS Alignment and Sizing Snippets

by Brian Rinaldi on November 25, 2013

The modern web is always changing, and this article is more than two years old.

css-alignment-header

By Tim Severien

CSS can be tricky sometimes, especially when aligning and setting sizes. This article contains a bunch of helpful snippets that I’ve gathered. They make my life easier, and hopefully yours as well.

Note: beneath each snippet is a table indicating browser support.

Alignment

Horizontally and vertically

Dynamically sized elements.

.parent { position: relative; }

.child {
    position: absolute;

    left: 50%;
    top: 50%

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
Chrome Firefox Internet Explorer Opera Safari
4.0 3.6 9 10.5 3.1

 

Statically sized elements.

.parent { position: relative; }

.child {
    position: absolute;

    left: 50%;
    top: 50%

    height: 250px;
    width: 500px;

    /* Translate element based on it's size */
    margin-left: -125px;
    marign-top: -250px;
}
Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 4.0 7.0 1.0

 

With percentages

.parent { position: relative; }

.child {
    position: absolute;

    height: 50%;
    width: 50%;

    left: 25%; /* (100% - width) / 2 */
    top: 25%;  /* (100% - height) / 2 */
}
Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 4.0 7.0 1.0

Horizontally

Block elements with a width value.

.block {
    margin-left: auto;
    margin-right: auto;
}
Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 6.0 3.5 1.0

 

Inline and inline-block elements.

.parent { text-align: center; }
.child { display: inline-block; }
Chrome Firefox Internet Explorer Opera Safari
1.0 3.0 8.0 7.0 1.0

Vertically

Inline and inline-block elements in a static parent.

.parent { line-height: 500px; }

.child {
    display: inline-block;
    vertical-align: middle;
}
Chrome Firefox Internet Explorer Opera Safari
1.0 3.0 8.0 7.0 1.0

 

Faking tables.

.parent { display: table; }

.child {
    display: table-cell;
    vertical-align: middle;
}
Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 8.0 7.5 1.0

Sizing

The following creates a full-sized block element, but it fails with borders, margins and padding. The box-sizing property prevents it from becoming larger as is intended.

html { min-height: 100%; }
body { height: 100%; }

.block {
    height: 100%;
    width: 100%;

    -webkit-border-sizing: border-box;
    -moz-border-sizing: border-box;
    border-sizing: border-box;
}
Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 8.0 7.0 3.0

 

The next snippet creates a full-sized block element for full screen that doesn’t rely on box-sizing for margin and padding. You can set values to create space for things like headers.

html { min-height: 100%; }
body { height: 100%; }

.center {
    position: absolute; /* or fixed */

    bottom: 0;
    left: 0;
    right: 0;
    top: 0; /* top: 50px; would reserve 50px for an header */
}
Chrome Firefox Internet Explorer Opera Safari
1.0 3.0 7.0 4.0 2.0.2

 

Next we create an absolute element that’s always equal or larger than the viewport, based on the document’s height.

html {
    position: relative;
    min-height: 100%;
}

body { height: 100%; }

.block {
    min-height: 100%;
    position: absolute;
}
Chrome Firefox Internet Explorer Opera Safari
1.0 3.0 7.0 4.0 2.0.2

Conclusion

Pretty much all methods discussed here can be combined by nesting them. Do you know any other great tricks or useful snippets? Please share in the comments.

This article was originally published at http://timseverien.nl/2013/10/css-alignment-and-sizing/

3 comments"

  1. Greg says:

    Hi!
    You’ve probably meant box-sizing model here: border-sizing: border-box;
    I don’t know the border-sizing 😉

  2. Gregg says:

    I don’t get these. When I try them, they don’t work. For example, the first one: http://jsfiddle.net/4xLWT/
    It only gets aligned horizontally. You can do this simply by using margin: auto – why do all the transform: translate stuff? Also, it would be nice to have real example outputs next to the samples you provided.

    1. Lukáš Mladý says:

      There is a missing colon after top: 50% -> top: 50%;

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2016 Modern Web & our authors. All rights reserved.