Выровняйте div по вертикали внутри встроенного блока

Question

У меня есть неизвестное количество div, которое будет заполнено внутри div блока. Там нет проблем, когда есть более одного div, поскольку он выглядит хорошо, но когда есть только один div, я хочу, чтобы он был центрирован в родительском. Я хочу попытаться сделать это без какого-либо фиксированного/абсолютного позиционирования и, надеюсь, без использования javascript.

В скрипке вы можете увидеть первую колонку, div с «Поместите меня посередине» должен быть посередине.

http://jsfiddle.net/Lzzyywf2/5/

<div class="inlineb"> 
    <div class="insideInline">Hello</div> 
</div> 
<div class="inlineb"> 
    <div class="insideInline">Hello</div> 
    <div class="insideInline">Hello</div> 
</div> 

.inlineb { 
    min-height:102px; 
    display:inline-block; 
    border:1px red solid; 
    vertical-align:top; 
} 
.insideInline { 
    height:50px; 
    border:1px solid blue; 
} 

Answer 1

Пробег: :only-child для .insideInline. Это будет нацелено на элемент, если внутри родителя есть только один. Here's my fiddle.

#wrapper { 
} 
.inlineb { 
    min-height:102px; 
    display:block; 
    border:1px red solid; 
    vertical-align:top; 
    width:126px; /*or whatever value*/ 
} 
.insideInline { 
    height:50px; 
    border:1px solid blue; 
    display:inline-block; 
    width:37px;/*or whatever value*/ 
} 

.inlineb .insideInline:only-child { 
    display:block; 
    margin:0 auto; 
} 

Answer 2

Если вы можете вручную добавить класс для этих контейнеров только с одним ребенком, это будет работать:

http://jsfiddle.net/Lzzyywf2/6/

<div class="inlineb one-child"> 
    <div class="insideInline">Hello</div> 
</div> 

в сочетании с:

.one-child:before { 
    content: ""; 
    display: block; 
    height: 25px; 
} 

---

Если вы не можете добавить класс, это будет работать в IE9 +:

http://jsfiddle.net/Lzzyywf2/9/

.insideInline:only-child { 
    display:block; 
    margin-top:25px; 
} 

Кредит в ОП для улучшения этой идеи!

Answer 3

Flex коробка сделает вашу жизнь проще:

.flex-contain{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    -ms-box-orient: horizontal; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 
    width:900px; 
    height:500px; 
    background:#000; 
    align-items:center; 
    align-content:center; 
    } 

    .flex-item { 
    height:200px; 
    width:200px; 
    background:yellow; 
    margin:0 auto; 
    } 

http://codepen.io/cjthedizzy/pen/vEpyvR