css - Vertically centre variable-length content inside responsive boxes with fixed-pixel margins? -

css - Vertically centre variable-length content inside responsive boxes with fixed-pixel margins? -

i'm looking simplest way accomplish type of layout looks simple:

...but involves lot of criteria, many of involve non-trivial css issues:

vertically centred content in div... ...where content of variable length (so distance top , bottom can't hard coded)... ...where div within selection of floated divs... ...where divs have percentage widths fill screen on responsive layout... ...where there fixed pixel gap between each div... ...where divs have solid background colours or images , background behind divs isn't known solid colour can re-applied

various elements of have been addressed in separate questions (for illustration vertically aligning floated divs, , pixel gaps between responsive percentage-width divs), couldn't find combining them.

simplest means:

as few html wrappers possible minimal javascript (none if possible) minimal css needs alter when breakpoints alter number of divs on each row minimal code, quirks, or fragile css trickery (e.g. relying on browser quirks alter in future) minimal cross browser issues (ideally, should work on ie8+ minimal ie-specific markup)

here's simplest can come with. code snippet below. it's existing method vertically centring floats, putting background on middle wrapper, , setting fixed pixel gaps using padding on outer wrapper rather margins box-sizing: border-box;.

jsbin demo three html elements per block - seems minimum floated vertically centred content inner content doesn't have known height. no js only % width needs alter change number of blocks per line if text content big div, div expands without breaking layout - overflow: hidden; can applied if undesirable works on ie8 no issues (fails on ie7 if poor souls still need back upwards ie7)

class="snippet-code-css lang-css prettyprint-override">.box-outer { box-sizing: border-box; float: left; /* editable */ width: 50%; height: 110px; padding: 1px 1px 0px 0px; /* sets gap */ /* padding does't collapse margins - 1px round gives 2px gaps */ } .box { width: 100%; height: 100%; box-sizing: border-box; display: table; /* height doesn't fill without display: table */ /* editable: */ background: #99ffff; padding: 8px; } .box-inner { vertical-align: middle; display: table-cell; } .boxes-container { padding: 0px 0px 1px 1px; /* opposite of each box's padding */ /* editable: */ background: #ffffff url('http://freedesignfile.com/upload/2012/10/sky_clouds_03.jpg'); } class="snippet-code-html lang-html prettyprint-override"><div class="boxes-container clearfix"> <h2> title </h2> <div class="box-outer"> <div class="box"> <div class="box-inner"> box content </div> </div> </div> <div class="box-outer"> <div class="box"> <div class="box-inner"> box longer content </div> </div> </div> <div class="box-outer"> <div class="box"> <div class="box-inner"> box </div> </div> </div> <div class="box-outer"> <div class="box"> <div class="box-inner"> box longer textual content </div> </div> </div> <br/> <p style="text-align: center;"> <--- responsive width ---> </p> </div>

css responsive-design