Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Cross Browser Vertically And Horizontally Centered Images In CSS Without Tables

DZone's Guide to

Cross Browser Vertically And Horizontally Centered Images In CSS Without Tables

·
Free Resource
// this centers an image of unknown size vertically and horizontally within a box.
// the wrapper box has an explicit width and height.
// the  is a hack for internet explorer



   



.logo {
  display: block;
  text-align: center;
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 4px solid #dddddd;
  padding: 4px;
  height: 74px;
  width: 74px; }
  .logo * {
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
    .logo .photo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%; }
Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}