Verification: a143cc29221c9be0

Php center align div to the center

Php center align div to the center

Horizontal centering with text-alignment

Photograph of a classic Chuck Converse shoe

Sometimes the obvious solution remains the best option:

div.center {
	text-align: center;
	background: hsl(0, 100%, 97%);
}
div.center img {
	width: 33%; height: auto;
}

This doesn’t align the image vertically: you’d need to add padding to the

or margin-top and margin-bottom to its content to achieve that, leaving the container to gain its height from its content.

Centering with margin: auto

Photograph of a white classic Nike sneaker

Again primarily for horizontal centering, with the same limitations as the text-alignment method above:

div.center {
	background: hsl(60, 100%, 97%);
}
div.center img {
	display: block;
	width: 33%;
	height: auto;
	margin: 0 auto;
}

Note the display: block, necessary in this case for the image to accept margin: 0 auto.

table-cell centering

Photograph of black Oxford calfskin shoe designed by Vivienne Westwood

Uses display: table-cell, rather than actual table markup; allows for both horizontal and vertical centering. Typically requires the addition and manipulation of a second, exterior element, which could be anything from a div to the body itself.

Absolute Centering

Photograph of an Under Armour Micro G Toxic Six shoe

A technique recently promoted by Stephen Shaw has very good support across browsers. The one downside is that some form of height must be declared for the outer container:

.absolute-aligned {
	position: relative;
	min-height: 500px;
	background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
	width: 50%;
	min-width: 200px;
	height: auto;
	overflow: auto;
	margin: auto;
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
}

Stephen has demonstrated a number of variations of this code in his Smashing Magazine article covering the technique.

Centering With translate

Photograph of a Jimmy Choo shoe

A newer technique by Chris Coiyer that uses CSS transforms. Also supports horizontal and vertical centering:

.center {
	background: hsl(180, 100%, 97%);
	position: relative;
	min-height: 500px;
}
.center img {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 30%; height: auto;
}

Comes with a few downsides:

  • CSS transform code will require vendor prefixes to work in older browsers.
  • Won’t work in older versions of IE (version 8 and earlier)
  • Outer container will need to have a set height (or gain it in some other way) as it won’t get any height from its absolutely-positioned content.
  • If the content contains text, current browser compositing techniques can leave the translated text blurry.

Flexbox centering

Photograph of a Manolo Blahnik shoe

Will probably become the centering solution of choice once the property variants and vendor prefixes have faded away.

.center { 
	background: hsl(240, 100%, 97%);
	display: flex;
	justify-content: center;
	align-items: center;
}
.center img { 
	width: 30%; height: auto;
}

In many respects flexbox is the simplest solution, but one that is held back by the variety of older syntaxes and lack of support in earlier versions of IE (although display: table-cell makes for an acceptable fallback).

Now that the spec has been finalized and browser support is settling down, I have written extensively on flexbox layout and its uses.