<p>
	<button type="button">Change display property</button>
</p>

<div id="wrapper">
  	<div id="div1" class="content">Some text</div>
	  <div id="div2" class="content">Some text</div>
	  <div id="div3" class="content">Some text</div>
</div>

body {
	background-color: #333;
	margin:1em;
}
#wrapper {
	width:100%;
	max-width: 46em;
	margin:0 auto;
}

.content {
	height: 2em;
  text-align:center;
  vertical-align: middle; /* this has no effect with display block */
  /*margin:1em 0;*/
}
.display_cell {
	display: table;
  /*border-spacing: 1em 0;*/
}
.display_cell>.content {
	display:table-cell;
  height: 6em;
}


/* colors and heights */
#div1 {
	background-color: #defd90;
}
#div2 {
	background-color: #f7abd9;
}
#div3 {
	background-color: #9ed6f9;
}
p {
    margin-bottom:2em;
    text-align: center;
}
button {
    font-size:1.5em;
    padding:.3em;
}

document.getElementsByTagName('button')[0].onclick = function () {
	var _wrapper = document.getElementById('wrapper');
	if(_wrapper.classList.contains( 'display_cell')) {
		_wrapper.classList.remove('display_cell');
	} else {
		_wrapper.classList.add('display_cell');
	}
}