3

I am working on a CSS animated HTML block. I created a fully responsible grid, so these blocks have relative sizes. The block contains a big image to ensure to display the content on all screens correctly. The images in the blocks have 100% width to fit the content, and they also have CSS transitions and transforms.

I would like to center these images vertically, but using only pure CSS. I tried a lot of variations of display, position and vertical-align properties, but no one worked for me. I could easily achieve the proper animation with the background property, but I don't want to create a lot of css classes for all the images (not even with js or jquery).

So could you tell me how to solve this issue with pure CSS? I also created a jsfiddle to demonstrate the problem.

EDIT: I also would like to keep the ratio of the images inside the blocks.

Patartics Milán
  • 4,858
  • 4
  • 26
  • 32
  • Why PURE CSS, and not leverage the merits offered by JS? – Terry Sep 15 '13 at 08:28
  • Because css is simply better that js, and beacause it is a returning problem in my projects, and sometimes I can only use css. – Patartics Milán Sep 15 '13 at 08:31
  • While I understand that some projects can only use CSS, I don't see why "css is simply better than js", with all due respect. – Terry Sep 15 '13 at 08:32
  • more safe, quicker, more seo friendly and works with js disabled browsers. – Patartics Milán Sep 15 '13 at 08:33
  • (1) JS is not any more dangerous than CSS, if you are fastidious and careful with it. (cross-site scripting is an exploit only when you don't know how to handle it properly, and it has nothing to do with the inherent security of the language). (2) JS and CSS enhancement, in your example, has /nothing/ to do with SEO. (3) How many visitors actually have JS disabled? That is the question. – Terry Sep 15 '13 at 08:34
  • I found this in stackoverflow & it works for me, http://stackoverflow.com/a/12471484/1505787 – Madhu Mallikarjunaiah Jan 11 '14 at 19:43

5 Answers5

2

I've created a codepen example of position centrally horizontally and vertically and if you resize it stays in the centre.

http://codepen.io/tom-maton/pen/oqsEJ

In the example I have 

margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;

This makes it h &v positioned centre if you just do 

margin: auto 0;
position: absolute;
top: 0;
bottom: 0;

This will position just vertically

Hope this helps

Tom Maton
  • 1,564
  • 3
  • 23
  • 41
0

You need to define the height: 100%; as well.

demo

if you define the images with css then it could be as ratio as you wish by setting background-size: cover; but to the image it's not possible.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
0

I had a look around and found this link for you:

CSS Tricks - Absolute Center (Vertical & Horizontal) and Image

I hope this can be of some help to you

I have done it on your fiddle too:

Your Fiddle Link

I simply added margin-top: -100px;

EDIT

Sorry didn't realised it wasn't for a fixed size see this updated version:

Fiddle Updated

I used the following code:

position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 50%;
margin: -25% 0 0 -25%;

I found it here:

6 Methods For Vertical Centering With CSS

AaronHatton
  • 392
  • 1
  • 7
  • 26
0

You can't do what you want both retaining the image ratio and your container DIV smaller than image size, you can even set the height:100% to fit image inside the DIV or set DIV to a bigger size (or use smaller image to fit in the DIV) and use line-height:100%

Here are demo for first solution:

Demo changing the ratio

And demo for second solution:

Demo not changing the ratio (I also set the text-align:center to make sure it is centered even when you don't use width:100%)

Hope it helps you.

Rojan Gh.
  • 1,062
  • 1
  • 9
  • 32
0

The most dynamic solution (in my opinion) is using translateY. This will move the element from its current position: see: CSS3 2D transforms

img {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
Bence Somogyi
  • 1