Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


horizontal and vertical centering of an image - why is this so tricky?

Posted on 2008-10-23
Medium Priority
Last Modified: 2010-04-21
All of the examples I have seen for horizontally AND vertically centering an image in a DIV just don't seem to work in a page full of elements.  I can't get centering to work reliably without messing up something else on the page. In a page full of elements, already carefully balanced with CSS rules, I cannot apply rules that will affect the entire page.

So, why is this so tricky?

My question:

Starting from an existing DIV element with the class ReptilePhotoBox

   .ReptilePhotoBox {
      width: 150px;
      height: 200px;
      overflow: hidden;
      float: left;
      border: ridge white 2px;
      margin-right: 3px;
      margin-left: 3px;

I need that CSS in the .ReptilePhotoBox , and I have other images on the page (not in the .ReptilePhotoBox classed DIV) that I do not want centered - only the images within the ReptilePhotoBox  DIV should be centered horizontally and vertically.

So, can you do it? It is OK to add or subtract CSS from the .ReptilePhotoBox class, as long as the functionality already there still works. Plus, you can define the image (img) within the .ReptilePhotoBox :

.ReptilePhotoBox img {


Or, if you prefer, you can make the img fall within yet another DIV with its own class.

Can you do it? I bet you 500 points you can't ! :~)

Question by:dtleahy
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Assisted Solution

mverschoof earned 200 total points
ID: 22784290
First off, funnyway to get someone to reply :D

Second, is there a online version or something to see the problem? maybe a screenshot? There are a lot of things that can make a difference.

The best way would be a online version because i could see the different div's and come up with a solution faster than guessing.

Cheers, Michael

Author Comment

ID: 22788275
Hi Michael,

First, I hope my challenge of "bet you can't do it" was seen as fun. I sure do appreciate the help of the experts who give their time here.

The ASP page it comes from is a new commercial site, and I'd rather not post a URL to it. I think it would also scare away many from helping, to be asked to wade through a page full of code. I'll try to post a pared down version  of the page. However, I know that some CSS gurus here can give me the scoop on horizontally and vertically centering images that works for them.

LVL 43

Assisted Solution

by:David S.
David S. earned 600 total points
ID: 22789024
CSS2 was designed to allow you to position things from top to bottom. It seems they didn't really consider vertical centering when they created it.

Perhaps these will help you:
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

LVL 44

Accepted Solution

scrathcyboy earned 1200 total points
ID: 22792269
first question -- "So, why is this so tricky? "
because the panels of supposed experts designing CSS2 were too myopic to realize that EVERYONE in the world will want to do this.   Blinders on = = bad product.  Surprise!  In CSS3, they still haven't got it yet !!!

"Can you do it? I bet you 500 points you can't ! :~)"

Nah, you can center ANY DIV you want, as long as you are prepared to go to extreme hacks to get around the mypoic design of CSS2.  Without getting into the details of what you want, if you want a challenge, assimilate all these different ways of doing it -- 

If that doesn't show you how to do it, ask for more

Author Comment

ID: 22799442
I am away from my computer for the weekend (out of town), so I won't be able to check out these solutions. But, scrathcyboy, Kravimir, and mverschoof, I sure do appreciate the replies.

Seems like many times when I have seen the "solution", it was on a totally stripped-down page, maybe even a page with just a single visible element on the page. What I really want is 2 rows of thumbnail images, and I need to have them within a tabbed interface. So, to have the two rows of boxes, I need to use floats for each box in the first row, then a clear, then another row of boxes.  I have the whole scheme worded out, and the only thing not working is the centering of all the thumbnail images within the boxes. It looks really stupid when they're not centered. If I can't get it to work any other way, I guess I'll insert a table {shudder} because I think I remember that centering within a table cell is easy.

Maybe CSS4 or CSS5 or CSS6 will provide a solution to the idiotic layout functionality that CSS1 through 3 could not. My granddaughter will have better tools to do web development, maybe. Yes, when CSS2 came out, I was amazed that the issues of creating a layout in a table-like fashion was still not addressed. Oh well, I have to work with whatever is available right now, and I will follow all those links to see if there is something there that will work.



Author Comment

ID: 22834336
I tried, and tried, many suggestions from the cited sites, and could not get thumbnail images of unknown dimensions to horizontally and vertically center properly with divs. Again, I see examples of it being accomplished, on very simple sample pages, but my more complex page in a different story. I want/ need something that looks just like a fixed size table 880px wide x 400px high, 2 rows, 5 columns. So, I have to use flots for the first row, then clear, then use floats on a second row.

You know, it just dawned on me that I could have used all position:absolute on every "table cell" (div) to create the look of a table.

But you know what, after several hours of screwing around with it, I used a table. And, it looks perfect, and the  thumbnail images of unknown dimensions horizontally and vertically center properly. (And simply formatted the table with CSS.)

What can I say - there's a lot to love about CSS, but centering images in a div ain't one of them.

I'll try to figure out who should get the points on this. I probably need CSS boot camp.

Thanks for trying.


Author Comment

ID: 22834345
"with divs" I meant "within divs"

Author Comment

ID: 23417395
Well, I feel badly having abandoned this question, and I don't honestly know if the solution that I finally took was somewhere within the citations listed, or not. I kinda doubt it, because I finally just decided it was one of the deficiencies of CSS (and CSS2!) and that it could be accomplished with invisible table cells, formatted with CSS. That's right, here we are in 2009, and I used a freakin' table! Here come the Holy Grenades of Antioch!

It simply wasn't worth the effort to design a CSS-only solution to the problem. So, I fixed the damn thing, and moved on.

scrathcyboy was 100% correct in his assessment:
first question -- "So, why is this so tricky? "
because the panels of supposed experts designing CSS2 were too myopic to realize that EVERYONE in the world will want to do this.   Blinders on = = bad product.  Surprise!  In CSS3, they still haven't got it yet !!!

I'm awarding points to all who tried to help. And, I do very much appreciate the help!


Author Closing Comment

ID: 31509104
I gave high grades because, well, why the hell punish these fine upstanding folks just because CSS is not very evolved yet - at least with some functionality.

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question