Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created April 17, 2012 05:57
Show Gist options
  • Star 31 You must be signed in to star a gist
  • Fork 40 You must be signed in to fork a gist
  • Save LeaVerou/2403795 to your computer and use it in GitHub Desktop.
Save LeaVerou/2403795 to your computer and use it in GitHub Desktop.
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>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@caycefischer
Copy link

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

@LeaVerou
Copy link
Author

It includes both syntaxes.

@jimmykane
Copy link

Is not centered in chromioum

@hgsadhrakiya
Copy link

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

.class-name {
        margin: 0px;
	padding:0px;
	float: left;
	width:100%;
	position:absolute;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	left:50%;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment