Create a gist now

Instantly share code, notes, and snippets.

Embed
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>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@zakkain

This comment has been minimized.

Show comment
Hide comment
@zakkain

zakkain Apr 18, 2012

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

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 html5please.us need updating, dare I wonder? :D

@LeaVerou

This comment has been minimized.

Show comment
Hide comment
@LeaVerou

LeaVerou Apr 18, 2012

It includes both syntaxes.

Owner

LeaVerou commented Apr 18, 2012

It includes both syntaxes.

@jimmykane

This comment has been minimized.

Show comment
Hide comment
@jimmykane

jimmykane May 9, 2013

Is not centered in chromioum

jimmykane commented May 9, 2013

Is not centered in chromioum

@hgsadhrakiya

This comment has been minimized.

Show comment
Hide comment
@hgsadhrakiya

hgsadhrakiya Nov 7, 2017

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%;
}

hgsadhrakiya commented Nov 7, 2017

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