CSS Alignment and Sizing Snippets

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 https://timseverien.nl/2013/10/css-alignment-and-sizing/