div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

Try it yourself »
More examples at the bottom of this page.

Browser Support

The box-align property is not supported in any of the major browsers.

Internet Explorer 10 supports an alternative, the -ms-flex-align property.

Firefox supports an alternative, the -moz-box-align property.

Safari, Opera, and Chrome support an alternative, the -webkit-box-align property.

Note: Flexible boxes are not supported in Internet Explorer 9 and earlier versions.

Definition and Usage

The box-align property specifies how to align the child elements of a box.

Default value:	stretch
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.boxAlign="center"

Syntax

box-align: start|end|center|baseline|stretch;

Value	Description	Play it
start	For normal direction boxes, the top edge of each child is placed along the top of the box. For reverse direction boxes, the bottom edge of each child is placed along the bottom of the box	Play it »
end	For normal direction boxes, the bottom edge of each child is placed along the bottom of the box. For reverse direction boxes, the top edge of each child is placed along the top of the box	Play it »
center	Any extra space is divided evenly, with half placed above the child and the other half placed below the child	Play it »
baseline	If box-orient is inline-axis or horizontal, all children are placed with their baselines aligned	Play it »
stretch	The child elements are stretched to fill the containing block