Вертикальное выравнивание divs с высотой строки и неопределенной высотой

Question

Я пытаюсь центрировать div по вертикали, используя высоту линии, без указания заданного значения пикселя для высоты линии. Мне нужно, чтобы линия-высота расширялась до размера его div. Использование «100vh» работает, но единицы видового экрана широко не поддерживаются достаточно широко. Установка высоты линии до 100% не работает. Вот мой HTML:

<div class="background"> 

<div class="lightboxbg"> 
    <div class="wrapper"> 
    <div class="centerme"></div> 
    </div> 
</div> 

</div> 

И мой CSS:

html, body { 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 

.background { 
    width: 90%; 
    height: 100%; 
    background-color: AntiqueWhite; 
} 

.lightboxbg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    vertical-align: middle; 
    text-align: center; 
} 

.wrapper { 
    vertical-align: middle; 
    line-height: 100%; 
    height: 100%; 
    width: 100% 
} 

.centerme { 
    vertical-align: middle; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
} 

And here's a jsfiddle. Синий ящик будет центрированным, если я мог бы получить высоту строки обертки, чтобы расширить до высоты обертки, но дон Не знаю, как это сделать. Спасибо за прочтение.

РЕДАКТИРОВАТЬ: Ответ Натана Ли для решения с ячейками таблицы, Fredric Fohlin для довольно дикого «абсолютного позиционирования» и MM Tac для решения, использующего абсолютное позиционирование.

Answer 1

Взгляните на эту идею. Он может удовлетворить вас: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

.Center-Container { 
    position: relative; 
} 

.Absolute-Center { 
    width: 50%; 
    height: 50%; 
    overflow: auto; 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

В вашем случае обертка необходимо относительное позиционирование, а «центр меня» абсолютное позиционирование.

Answer 2

Заменить .centerme со следующим CSS:

CSS:

.centerme { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -50px; /* negative-half of element's width*/ 
    margin-top: -50px; /* negative-half of element's height*/ 
} 

Вот DEMO и вот полная страница RESULT.

UPDATE

до центра DIV для переменной длины проста, просто удалить height, width, margin-left, margin-top справка из .centerme CSS.

.centerme { 
    background-color: blue; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

Адрес UPDATED DEMO.

Answer 3

Здесь вы идете.

WORKING DEMO

CSS-Change:

.lightboxbg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    vertical-align: middle; 
    text-align: center; 
    display: table; 
} 

.wrapper { 
    vertical-align: middle; 
    line-height: 100%; 
    height: 100%; 
    width: 100%; 
    display: table-cell; 
} 

Надеется, что это помогает.