How to center anything vertically in CSS

It should be easy, but then you find it isn't. Nothing out of the CSS box makes vertical centering obvious and pain-free. It's a sin.

The aim of this article is to show how, with some ingenuity and a few tricks, anything can be centered vertically.

Share  

Centering a div in a page, horizontally and vertically

This uses margin auto and an absolute-positioned div. This example is also featured in our companion article The complete guide to centering a div. It works with all browsers.
CSS
Example

See the Pen Centering a div in a page, horizontally and vertically by Steve Pear () on CodePen.

The value auto in the margin property sets all margins to the available space within the page. The div must have a width and height property.

Centering a div within a div, horizontally and vertically

This uses the margin auto trick to center a div both horizontally and vertically. It works with every browser.
CSS
HTML
Example

See the Pen Centering a div within a div, horizontally and vertically by Steve Pear () on CodePen.

The inner div must have a width and height property. This doesn't work if the outer div has a fixed height.

Vertical center in a div with transform

This uses transform to center any content in a div vertically. This method uses an HTML empty element as a container, in this case p.

Transform is supported by Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ and Chrome for Android 62+.

CSS
HTML
Example

See the Pen Vertical center in a div with transform by Tipue () on CodePen.

The div must have a height property. The perspective value stops blurring on high definition displays. You can support older browser releases using vendor prefixes for transform, such as -webkit-transform and -ms-transform. The later will go as low as IE9.

Flexbox, div centered

This centers a div both horizontally and vertically using Flexbox, the CSS3 Flexible Box Layout Module.

Flexbox is supported by Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ and Chrome for Android 62+.

CSS
HTML
Example

See the Pen Flexbox, div centered by Steve Pear () on CodePen.

The height property in the container can be anything, as long as it's larger than the centered div. In this example we're using vh, which is the height of the browser window, the viewport, rather than the height of the page.

Vertical center in a div with flexbox

This uses Flexbox again to vertically center content in a div.
CSS
HTML
Example

See the Pen Vertical center in a div with flexbox by Tipue () on CodePen.

The height property in the div must have a value.

Centering a dynamic div, horizontally and vertically

This method uses the display property with a table value, making it behave like a table element, centering a div both horizontally and vertically. The centered div can have dynamic content, that is, any height or width. It can be responsive.

Table display is supported by Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ and Chrome for Android 62+.

CSS
HTML
Example

See the Pen Centering a dynamic div, horizontally and vertically by Tipue () on CodePen.

The width and height properties in the centered div can be anything.
Share  

Read more on Tipue