/* By default vertical-align ist not possible, only different elements can be vertically aligned among eachother */
.block {
  background: red;
  height: 100px;
}

.inner {
  display: inline-block;
  vertical-align: middle;
  background: yellow;
  padding: 3px 5px;
}

.inner1 {
  height: 30px;
}

.inner2 {
  height: 20px;
}

/* With an added fake (pseudo) element it works. IMPORTANT: There must be no spaces between the elements in the source, else it doesn't work! */
.block2 {
  background: orange;
  height: 80px;
}

/* Fake (pseudo) element, that enables vertical-align */
.block2:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/* Also works if you set line-height instead of the height (or together with the same value as the height). No pseudo-element needed.  */
.block3 {
  background: green;
  /*height: 120px;*/
  line-height: 120px;
}

.inner3 {
  width: 30%;
  line-height: normal; /* Reset line-height for the child. IMPORTANT: Must be "normal", no integer value allowed! */
}

.block4 {
  background: magenta;
  line-height: 60px;
}

.inner4 {
  line-height: normal; /* Reset line-height for the child. */
  background: none;
}

/* Miscellaneous styling */
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

h3, div {
  font-family: 'PT Sans', sans-serif;
}

.block, .block2, .block3 {
  border: 5px dotted rgba(0,0,0,.4); 
  background-clip: padding-box;
  width: 50%;
}

.block4 {
  text-align: center;
  width: 20%;
  box-shadow: 3px 3px 0 black;
}

h3 {
  margin: 40px 0 7px;
}