Wednesday, December 04, 2013

CSS Alignment and Sizing Snippets

CSS Alignment and Sizing Snippets
* This article was originally published at http://timseverien.nl/2013/10/css-alignment-and-sizing/

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%);
}

ChromeFirefoxIEOperaSafari
4.03.6910.53.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;
}

ChromeFirefoxIEOperaSafari
1.01.04.07.01.0

With percentages:

.parent { position: relative; }

.child {
    position: absolute;

    height: 50%;
    width: 50%;

    left: 25%; /* (100% - width) / 2 */
    top: 25%;  /* (100% - height) / 2 */}

ChromeFirefoxIEOperaSafari
1.01.04.07.01.0

Horizontally

Block elements with a width value:

.block {
    margin-left: auto;
    margin-right: auto;
}

ChromeFirefoxIEOperaSafari
1.01.06.03.51.0

Inline and inline-block elements:

.parent { text-align: center; }
.child { display: inline-block; }

ChromeFirefoxIEOperaSafari
1.03.08.07.01.0

Vertically

Inline and inline-block elements in a static parent:

.parent { line-height: 500px; }

.child {
    display: inline-block;
    vertical-align: middle;
}

ChromeFirefoxIEOperaSafari
1.03.08.07.01.0

Faking tables:

.parent { display: table; }

.child {
    display: table-cell;
    vertical-align: middle;
}

ChromeFirefoxIEOperaSafari
1.01.08.07.51.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;
}

ChromeFirefoxIEOperaSafari
1.01.08.07.03.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 */
}

ChromeFirefoxIEOperaSafari
1.03.07.04.02.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;
}

ChromeFirefoxIEOperaSafari
1.03.07.04.02.0.2

Conclusion

Pretty much all methods discussed here can be combined by nesting them.