ブラウザによって、誤差が 1px 程度あるみたいですが、だいたいにおいてこんなもので行けそうな気がします。
コンテンツ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function(){ $("#box") .css( { "width": "400px", "height": "200px", "border": "1px solid #000" } ); var h1 = $("#box").outerHeight(); var h2 = $("#target").outerHeight(); $("#target") .css( { "width": "200px", "text-align": "center", "border": "1px solid #000", "margin-left" : "auto", "margin-right" : "auto", "margin-top": "calc( (" + h1 + "px / 2) - " + (h2/2+2) + "px )" } ); }); </script> <div id="box"> <div id="target">コンテンツ</div> </div>
$("#target").outerHeight() が、フォントサイズか line-height に影響を受けて、奇数の場合は 1ピクセルずれる感じです。
コンテンツ