HTML5 Ninja Techniques – Minimal HTML/CSS3 Markup Needed For Full-On Centering-Panel – With/Without CSS-Table

might find this inserting:
iCompile: HTML5 Ninja – Centring Container In The Middle Of ViewPort With CSS3 Only, No JavaScript

icompile.eladkarako.com_circle_unknown2this is intended to be a minimal “total-centering” markup, used for an internal-YouTube extension.


here is the simplified markup, it uses display:table and table-layout: fixed this technique is also known as the CSS-Table:

HTML:

<div panel>
  <div section header><div content>Item1</div></div>
  <div section video ><div content>Item2</div></div>
  <div section stream><div content>Item3</div></div>
  <div section footer><div content>Item4</div></div>
</div>

CSS:

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

/* structure */
[panel]{
  box-sizing: border-box;
  
  height:100%;
  width: 100%;
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
}

[section]{
  display: table-row;
  text-align: center;
}

[content]{
  display: table-cell;
  vertical-align: middle;
}

/* few get custom height, others compensate */
[header]{height:10%}
[footer]{height:10%}


/* just style */
[panel]  {border: 1px solid rgba(166,202,246,.8) }
[section]{background: rgba(166,202,246,.5) none  }
[content]{border: 1px solid rgba(166,202,246,.8) }

resulting something like this:

  • Full-on centering.
  • Selective-nodes will get height-set, remaining nodes will compensate.

Avoiding use of css-table might be a little weird for “classic-web-designers” (geeks!)
but it is perfectly ok technique to use

on same HTML above using the following CSS:

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

/* structure */
[panel]:before,[panel],[panel]:after{padding:0; margin:0; clear:both; content:''}

[panel]  { height:100%; text-align:center }

[content]{ 
  position:relative; 
  top:calc(50% - 2vmin);
}

/* height-set is mandatory for everyone of the sections */
[header] { height:10% }
[footer] { height:10% }
[video]  { height:40% }
[stream] { height:40% }


/* just style */
[section]{
  background: rgba(166,202,246,.5) none; 
  border: 1px solid rgba(166,202,246,.8);
}

resulting something like this:

  • Full-on centering, still ON.
  • May be considered more robust, since it will work even in IE..
  • Not favored by some puritans that claim ‘position’ should be avoided..
  • top:calc(50% - 2vmin); is a fix for better line-height
  • You need to define the height of all the nodes visible, calculating 100% total.

Conclusions:
There are tens of ways centering and holding data, part from real-HTML table which is neglected due to bad-streamlining with the page layout, most of markups include few layers of containers and a lot of class="... ... ...", used for both identifying the role and styling the nodes, which is not very readable, nor efficient,
part from that, the above techniques are being, almost, exclusively used, in terms of ‘how robust’ or ‘which one broke first’ those two probably has equal chance of holding horizontal-“Table-Like” data.


adding note (y2015m04d16h03m32)
generating a more complex pattern with no additional style complexity

generating a more complex pattern with no additional style complexity

or in complete segment:

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
  html, body { box-sizing: border-box; height: 100%; width: 100%; padding: 0; margin: 0; }
  
  /* structure */
  [container] { box-sizing: border-box; height: 100%; width: 100%; padding: 0; margin: 0; display: table; table-layout: fixed; border-collapse: collapse; }
  
  [section] { display: table-row; text-align: center; }
  
  [content] { display: table-cell; vertical-align: middle; }
  
  /* few get custom height, others compensate */
  
  [header] { height: 10% }
  
  [footer] { height: 10% }
  
  /* just style */
  [container] { border: 1px solid rgba(166, 202, 246, .8) }
  
  [section] { background: rgba(166, 202, 246, .5) none }
  
  [content] { border: 1px solid rgba(166, 202, 246, .8) }
</style></head>
<body>
<div container>
  <div section header><div content>Item1</div></div>
  <div section main><div container>
    <div content>Item2</div>
    <div content>Item3</div>
  </div></div>
  <div section footer><div content>Item4</div></div>
</div>
</body>
</html>