Vertical centering unknown height

Question

I'm trying to vertically center an image in a DIV that doesn't have a fixed/specified height. I've tried building on the Centering in the unknown article on CSS Tricks but for that to work you need to specify the height. Rather deceiving article title.

Here's my JS Fiddle: http://jsfiddle.net/6J2WA/

This is what I'd like (picture): http://cl.ly/image/1k0h262c2c3s

CSS

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
   height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
}


.inner {
max-width: 960px;
margin: 0 auto;
overflow: hidden;
    background: #ef4;
}

.c-3 {  
width: 29.3%;
float: left;
margin-left: 6%;
    background: #e4f;
}

#you-and-us .c-3 { width: 33.5%; }
#you-and-us .c-3:first-child { text-align: right; margin: 0; }
#you-and-us .c-3:nth-child(2) { width: 21%; text-align: center; position: relative; }

http://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically — isherwood, Mar 13 '13 at 17:15
Do you really want the image in the middle to be surrounded by the pink box? — cimmanon, Mar 13 '13 at 17:36

score 3 · Accepted Answer · answered Mar 13 '13 at 17:44

3

The reason you can't use the pseudo element technique is because you don't have enough ancestor elements that are 100% of the height of the #you-and-us element.

You can simplify the whole thing if you throw out floats and use display: table-cell for your .c-3 elements.

http://jsfiddle.net/6J2WA/5/

/* This parent can be any width and height */
.block {
    text-align: center;
}

.inner {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    background: #ef4;
}

.c-3 {  
    display: table-cell;
    background: #e4f;
}

#you-and-us .c-3 { width: 33.5%; }
#you-and-us .c-3:first-child { text-align: right; }
#you-and-us .c-3:nth-child(2) { width: 21%; text-align: center; position: relative; background: yellow; vertical-align: middle; }

answered Mar 13 '13 at 17:44

cimmanon

67,211
17
165
171

Thanks that does the job but when I introduce a breakpoint with media queries that basically stacks these 3 columns on top of one another with a float left. I get some odd results when I make the browser larger see: http://cl.ly/image/0g3a2e0O1x2e Any ideas how to get round this? – egr103 Mar 13 '13 at 18:16
Really, this code should be within a media query restricting it to larger viewports (see: *mobile first*). What do you *want* to happen for smaller viewports? – cimmanon Mar 13 '13 at 19:28
This code is a three column layout but I also have, 1, 2 and 4 column layouts. Basically with smaller viewports they just stack into one column. I am familiar with mobile first and understand your point but how can I fix the issue I have currently? – egr103 Mar 13 '13 at 19:59
I can't really help you if all you're going to provide is a screenshot. All that should need to be done is remove all of your floats related to these elements and hide `display: table-cell` from narrow viewports. Narrow devices should stack vertically, wide devices will be horizontal. – cimmanon Mar 13 '13 at 20:18

Vertical centering unknown height

1 Answers1