Align vertically using CSS 3

css html vertical-alignment alignment
tho picture tho · Mar 24, 2011 · Viewed 103.4k times · Source

With CSS 3, are there any way to vertically align an block element? Do you have an example? Thank you.

Answer

Charlie picture Charlie · Apr 16, 2013

Was looking at this problem recently, and tried:

HTML:

<body>
    <div id="my-div"></div>
</body>

CSS: 

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Here's the Fiddle:

http://jsfiddle.net/sTcp9/6/

It even works when using "width/height: auto", in the place of fixed dimensions. Tested on the latest versions on Firefox, Chrome, and IE (* gasp *).

Related questions

Vertically align text next to an image?

Why won't vertical-align: middle work? And yet, vertical-align: top does work.

Read More
Best way to center a <div> on a page vertically and horizontally?

Best way to center a <div> element on a page both vertically and horizontally? I know that margin-left: auto; margin-right: auto; will center on the horizontal, but what is the best way to do it vertically, too?

Read More
trying to align html button at the center of the my page

I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like …

Read More