Center vertical align an image from CSS


There are a few ways to center vertically. In terms of block level elements, the methods are quirky. Inline elements are much simpler to center:

If you know the height of your containing div, and the height of your inner centered div,  or, if you the height of your inner div does not matter, then vertical aligning is simple.  However, if you are vertically centering anything that is variable, such as text, vertical centering is more complex and require hacks.

 

The CSS for CSS compliant browsers:

 


About Ionut Afloarei

Senior .Net Developer with 14+ years of experience in Microsoft Technologies (ASP.net/C#, MVC, MSSQL, Entity Framework, Visual Studio, TFS, IIS, Azure Cloud, Microsfot Dynamics).