CSS Alignment and Sizing Snippets

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/

Modern Web Newsletter

Subscribe to receive the Modern Web tutorials, sent out every second Wednesday.

  • http://www.linkedin.com/profile/view?id=237684580&trk=nav_responsive_tab_profile Greg

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

  • Gregg

    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.

    • Lukáš Mladý

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

Top