How to make a box of unknown width and height align center (horizontally) and middle (vertically) CSS

Two methods were found:

case 1：¶

<div style="width:400px;height:200px;background:#000;color:#f00;display:table">        
       <div style="
                display:table-cell;
                overflow:hidden;
                vertical-align:middle;
                text-align:center">
                        content
       </div>
</div>

case2:¶

<div style="width:400px;height:200px;background:#000;color:#f00;position:relative">        
         <div style="
                        position: absolute;;left:50%;top:50%;
                        -webkit-transform: translate(-50%,-50%);
                        -ms-transform: translate(-50%,-50%);
                        -o-transform: translate(-50%,-50%);
                        transform: translate(-50%,-50%);">
                        content
         </div>
</div>

preview