JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x-outer">
<div class="x-inner" >
inner div
</div>
</div>
<div style="clear:both"></div>
<p id="results">
</p>
<p >
    On Firefox, IE8 (or IE9 Compatability Mode) and Chrome: the outerWidth(true) value is <strong>102</strong> (width plus border).</p>
<p>
    ON IE9 and Safari the outerWidth(true) value is <strong>200</strong> it appears to include the margin created by the margin:auto attribute)</p>

CSS

p{padding-top:10px;}

.x-outer{
    border:1px solid red;
    width:200px;
    float:left;
}
.x-inner{
    width: 100px; 
    display: block;
    border:1px solid blue;
    margin: 0px auto;
}
strong{font-weight:700;color:red;}

JavaScript

$("#results").html('$(".x-inner").outerWidth(true): <strong>' + $(".x-inner").outerWidth(true) + '</strong>');