How to center image both vertically and horizontally using before and after pseudoelements

Question

Today I visited a job interview and was asked the following question:

How can you center an image of unknown height and width both vertically and horizontally without the usage of tables (e.g. display:table-cell)?

I was given a hint that this is possible to do using before and after pseudo elements but I failed to find a solution. Could you please guys help?

http://css-tricks.com/centering-in-the-unknown/. The ghost centring technique does that. — Dominic, Jul 28 '14 at 11:51
centered to what? A parent with defined dimensions? the viewport? the whole body? — Fabrizio Calderan, Jul 28 '14 at 11:51
@Maximus: [This](http://jsfiddle.net/bR37X/) is demo of that exact article pointed out by Dominic Tobias. I was asked the same question by somebody a little earlier too :) — Harry, Jul 28 '14 at 11:56
Something like this ? http://stackoverflow.com/questions/24245616/vertically-centering-content-in-html/24245798#24245798 — Joffrey Maheo, Jul 28 '14 at 12:11
@DominicTobias, thanks! This is probably the solution the guys wanted me to demonstrate. Best, — Max Koretskyi, Jul 28 '14 at 12:19

score 1 · Accepted Answer · answered Jul 28 '14 at 12:49

1

Probably the simplest way:

DEMO

img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

answered Jul 28 '14 at 12:49

Turnip

35,836
15
89
111

1

Ha, very good one! So `translateX` just moves the element up, correct? And the difference between say negative margin is that there is no need to specify length in px, correct? Here `translate(-50%)` `-50%` mean 50% of the elements height? – Max Koretskyi Jul 28 '14 at 14:58
`translateX` moves along the X axis (left to right) `translateY` along the Y axis (top to bottom). – Turnip Jul 28 '14 at 15:09
yeah, but I could move the element up too with negative top margin, right? However, without knowing the height of the centered box I can't specify the value for the margin, whereas with `translateX` I don't need to know the height and can say `-50%` (of the centered elements height). – Max Koretskyi Jul 28 '14 at 15:12
1

Yep. Makes things much easier – Turnip Jul 28 '14 at 15:23

How to center image both vertically and horizontally using before and after pseudoelements

1 Answers1