oo2bqg
Last Updated: February 25, 2016
·
8.604K
· idered
190043 533696520020804 1840519452 n

New(?) way to center elements verticaly.

Maybe new, maybe not, I don't know but I haven't seen it anywhere.

This technique is based on two inline-block elements with vertical-align set to middle. First one have set 100% height and second one is where we put content.

HTML:

<i class="inliner"></i>
<div>Sample content</div>

CSS:

.inliner {
    height: 100%;
}

.inliner,
.inliner + * {
    display: inline-block;
    vertical-align: middle;
}

You can play with it here: http://jsbin.com/oxuyop/919/edit

17 Responses
Add your response

481
B4fee1980982b62278aadf33ada0362e

Great tip! Doesn't seem to work in IE7 tho..

over 1 year ago ·
485
Me

nice once :D

over 1 year ago ·
544
527657 350954588303809 1195162128 n

@emilnordh I was thinking the same thing. Thanks for trying out.

over 1 year ago ·
546
1341762883

@emilnordh What about IE8?

over 1 year ago ·
547
11904d2d1af36d532f9d78d9d59f6819

And given we're not supporting IE7 (don't know about IE8, either, though, but should work)... here's the obligatory no-extra-markup version: http://jsbin.com/oxuyop/102/edit

over 1 year ago ·
551
190043 533696520020804 1840519452 n

@nathansmonk It works in IE8+ and any browser that support display: inline-block;

@passcod looks good tought you will be able to center only one element in page. With mine code you can center anything ;)

over 1 year ago ·
561
11904d2d1af36d532f9d78d9d59f6819

@idered No no no... you can center anything too. I'm just using the body element as a container. Replace body:before with parentelement:before and everything still just works (see: http://jsbin.com/oxuyop/144/edit). After all, it uses the exact same technique... just without extra markup.

over 1 year ago ·
564
B4fee1980982b62278aadf33ada0362e

@passcod :before and :after isn't supported i IE7 either. @idered I think IE7 supports inline-block on elements wich are usually used as inline?

over 1 year ago ·
565
190043 533696520020804 1840519452 n

@emilnordh Nope, it doesn't support it at all. Usualy *display: inline; is used as fallback for IE7 but in this case it doesn't work.

over 1 year ago ·
3192
36b4b730bc6d058fd0737fc44119ed6f

I first ran across this tip at http://css-tricks.com/centering-in-the-unknown/ , and he references http://gtwebdev.com/workshop/vcenter/vcenter-inline-css.php . Doesn't matter if others already have it though, it's a great tip!

over 1 year ago ·
3236
Cory simmons 700

@emilnordh IE7 = .87% users. Screw them. :)

Btw great tip. Thanks so much.

over 1 year ago ·
3441
736212 10200976756252420 836055407 o

@nathansmonk IE8 don't work

over 1 year ago ·
3442
Sans titre 1

You can do this with a single element using :before pseudo-element: http://bl.ocks.org/2867324, it avoids the extra DOM element.

over 1 year ago ·
3443
Fabien zibi
over 1 year ago ·
3446

With IE7 you may have to force haslayout. This is generally the way I handle inline-block:

Display:inline-block;
Zoom:1;
*display:inline;

over 1 year ago ·
3467
Profile icon margin transparent

I can't seem to implement it. It doesn't work.

over 1 year ago ·
3700

thank you for example

over 1 year ago ·