div内の要素の中央揃え

Question

div内に通知メッセージを集中させようとしていますが、top:50%を試しましたが、機能していません。一部のパディングを入れようとしましたが、そのメソッドが好きではありません。 ：http://jsfiddle.net/VPdmT/

.message > .inner { 
    padding:22px 0 0 40px; 
    top:50%; 
    margin:0 0 22px; 
    background-repeat:no-repeat; 
    background-position:0 17px; 
} 

Answer 1

.message > .inner { 
    padding: 0; 
    background-repeat: no-repeat; 
    background-position:0 17px; 
    display: table-cell; 
    vertical-align: middle; 
} 
.message.success { 
    color:#0e6200; 
    background-color:#d8ffcc; 
    border-color:#b3f39f !important; 
    display: table; 
} 

重要な部分はtable-cellディスプレイとそのdiv要素がtable表示でdivの内側にあることが必要です。

Answer 2

トップCSSルールは唯一の要素のその位置が静的以外であるにも適用することができます。あなたは絶対または相対を宣言していないので、topは無視されます。

EDIT：本当の答えに上は、次の操作を行います。

.message { display: table; width: 100%; } 
.message>.inner { display: table-cell; vertical-align: middle; } 

Answer 3

.message > .inner { 
    padding:22px 0 0 40px; 
    vertical-align:middle; 
    display:table-cell; 
    margin:0 0 22px; 
    background-repeat:no-repeat; 
    background-position:0 17px; 
} 

Answer 4

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ このリンクは画像を中央に揃える方法を示しています。それはいくつかの微調整であなたのために働くかもしれません。