CSS Vertical Centering

A fixed height container (the one with gray grid background) has some content inside (including block elements) of ‘unknown’ height (being dependent on text size, window width, …)

The content is vertically centered using display:table-cell; vertical-align:middle plus some display:inline-block hacks for IE (Win & Mac.)

Seems to work in IE5+ (Win & Mac), Op6+, Moz, Saf.

a small right float, just to test

Sempre caro mi fu quest’ermo colle, e questa siepe, che da tanta parte de l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato spazio di là da quella, e sovrumani silenzi, e profondissima quiete

  1. io nel pensier mi fingo, ove per poco
  2. il cor non si spaura. E come il vento
  3. odo stormir tra queste piante, io quello

infinito silenzio a questa voce vo comparando: e mi sovvien l’eterno, e le morte stagioni, e la presente e viva, e ’l suon di lei. Così tra questa infinità s’annega il pensier mio: e ’l naufragar m’è dolce in questo mare.

The same method can be used to get vertical centering in a ‘column’ whose height is determined by another column:

The Fox and the Grapes

One hot summer’s day a Fox was strolling through an orchard till he came to a bunch of Grapes just ripening on a vine which had been trained over a lofty branch. “Just the thing to quench my thirst,” quoth he. Drawing back a few paces, he took a run and a jump, and just missed the bunch. Turning round again with a One, Two, Three, he jumped up, but with no greater success. Again and again he tried after the tempting morsel, but at last had to give it up, and walked away with his nose in the air, saying: “I am sure they are sour.”

It is easy to despise what you cannot get.

The Fox and the Cat

A Fox was boasting to a Cat of its clever devices for escaping its enemies. “I have a whole bag of tricks,” he said, “which contains a hundred ways of escaping my enemies.” “I have only one,” said the Cat; “but I can generally manage with that.” Just at that moment they heard the cry of a pack of hounds coming towards them, and the Cat immediately scampered up a tree and hid herself in the boughs. “This is my plan,” said the Cat. “What are you going to do?” The Fox thought first of one way, then of another, and while he was debating the hounds came nearer and nearer, and at last the Fox in his confusion was caught up by the hounds and soon killed by the huntsmen. Miss Puss, who had been looking on, said:

Better one safe way than a hundred on which you cannot reckon.

The Town Mouse and the Country Mouse

Now you must know that a Town Mouse once upon a time went on a visit to his cousin in the country. He was rough and ready, this cousin, but he loved his town friend and made him heartily welcome. Beans and bacon, cheese and bread, were all he had to offer, but he offered them freely. The Town Mouse rather turned up his long nose at this country fare, and said: “I cannot understand, Cousin, how you can put up with such poor food as this, but of course you cannot expect anything better in the country; come you with me and I will show you how to live. When you have been in town a week you will wonder how you could ever have stood a country life.” No sooner said than done: the two mice set off for the town and arrived at the Town Mouse’s residence late at night. “You will want some refreshment after our long journey,” said the polite Town Mouse, and took his friend into the grand dining-room. There they found the remains of a fine feast, and soon the two mice were eating up jellies and cakes and all that was nice. Suddenly they heard growling and barking. “What is that?” said the Country Mouse. “It is only the dogs of the house,” answered the other. “Only!” said the Country Mouse. “I do not like that music at my dinner.” Just at that moment the door flew open, in came two huge mastiffs, and the two mice had to scamper down and run off. “Good-bye, Cousin,” said the Country Mouse, “What! going so soon?” said the other. “Yes,” he replied:

Better beans and bacon in peace than cakes and ale in fear.

Other vertical center tests

CSS tests home