Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Vertical centering with Flexbox + margin fallback
* Vertical centering with Flexbox + margin fallback
* Lea Verou & David Storey
html, body { height: 100%; }
body {
width: 100%; /* needed for FF */
margin: 0;
/* Flexbox hawtness */
display: flex;
align-items: center;
div {
padding: 1em 1.5em;
/* Fallback to look decent w/out Flexbox */
max-width: 10em;
margin: 1em auto;
/* Make it pretty */
background: slategray;
text-align: center;
border-radius: .3em;
color: #405060;
font: bold 150% sans-serif;
text-shadow: 0 2px 1px hsla(0,0%,100%,.2);
<div>OMG, I’m centered!</div>

zakkain commented Apr 18, 2012

This example is following the new flex-box syntax in the spec, right? How widespread is support for this? Might need updating, dare I wonder? :D


LeaVerou commented Apr 18, 2012

It includes both syntaxes.

Is not centered in chromioum

Try This:
Give this CSS to the div which you have to centralize..

.class-name {
        margin: 0px;
	float: left;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment