<!DOCTYPE html>
<html>
  <head>
    <title>balancing fixed-height multicol</title>
  </head>
  <body style="width:30em; color:black; background:white;">
    <p>Below there should be a blue box horizontally centered on the page.</p>
    <div style="-webkit-columns:3; columns:3; height:10em; orphans:1; widows:1;">
      <div style="color:white;">line</div>
      <div style="width:6em; margin:auto; color:blue; background:blue;">line</div>
      <div style="color:white;">line</div>
    </div>
  </body>
</html>