cssで上下左右中央寄せにする方法

CSSで上下左右中央寄せにする

あるボックスの中で上下左右の中央に画像を寄せるための方法をご紹介します。
テキストが2行以上になったとしても、上下左右ともに中央表示出来ます。

画像のサイズや文字列が変わっても対応する

ある高さ、幅に合わせて要素が中央になるようにしたい。
画像の大きさが変わっても、文字列が増えても対応するような柔軟さが欲しい。

htmlソース

<div class="updowncenter_wrapper">
    <div class="updowncenter_contents1">
        <span class="updowncenter_contents2">
        <div class="textbox">
        ここに文字とか画像入れたら<br />
        中央表示になるばい！
        </div>
        <img src="画像URL" />
        </span>
    </div>
</div>

CSSソース

.updowncenter_wrapper {
    width: 100%;
	height:400px;
    padding:15px;
    display: table;
    margin:0 auto;
    background-color:#FFF3E8;
}

.updowncenter_contents1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    /position: relative;
    /top: 50%;
}

.updowncenter_contents2 {
    /position: relative;
    /top: -50%;
}

.textbox{
    width:250px;
    margin:0 auto; 
    text-align:left;
}

このソースで上下左右が中央寄せになるボックスが作れます。
htmlソースのspan部分に注意して下さい。