方法1：

dabblet.css

html,body { height:100%; }

.list { padding:10px; border:3px solid #ccc; }

/*

方法1：


html,body { height:100%; }
body {
  text-align:center;
}
.list {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
body:before {
  content: '';
  display: inline-block;
  height:100%;
  vertical-align: middle;
}

*/

/*
方法2：

html {
  display: table;
  width: 100%;
  height: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.list {
  display: inline-block;
  text-align:left;
}
*/



/*
方法3：

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
*/


/*
方法4：

.list {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
}
*/

dabblet.html

<div class="list">
<img src="http://dummyimage.com/200">
<p>hi, box
<p>hi, box
<p>hi, box
<p>hi, box
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}