Vertically and horizontally center these HTML elements
You can simplify your HTML to this:

&lt;div id="parent"&gt;
    &lt;div class="floaters right"&gt;&lt;img src="cid:logo-img" /&gt;&lt;/div&gt;
    &lt;div class="floaters"&gt;Title&lt;/div&gt;
    &lt;div class="centerme"&gt;$message&lt;/div&gt;
&lt;/div&gt;


By adding classes, you can re-use CSS on more than one HTML element. The class floaters is applied to both of the divs that make up the top line. The class right is only applied to the left div on the first line to make it right aligned. 

The #parent:after is one example of a clearfix. There are several other versions of clearfixes.

* {
    box-sizing: border-box;
}
#parent {
    margin: 0px auto;
    width: 50%;
    border-radius: 6px;
    border: 1px solid #CFCFCF;
}
#parent:after {
  content: "";
  display: table;
  clear: both;
}
.floaters {
    float: left;
    background-color:#E4E4E4;
    width: 50%;
    height: 3em;
    padding: 5px 12px 5px 0;
}
.right {
    text-align: right;
}
.centerme {
    float: left;
    clear: both;
    text-align: center;
    background-color:#EFEFEF;
    height: 3em;
    width: 100%;
    padding-top: 12px;
}


I have a working jsfiddle for you to look at.