steveosoule
12/2/2013 - 7:27 PM

CSS Alignment and Sizing Snippets

CSS Alignment and Sizing Snippets

/* FROM: http://flippinawesome.org/2013/11/25/css-alignment-and-sizing-snippets/ */

/* 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*/