css - 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

最上位のCSSルールは、静的以外の位置にある要素にのみ適用できます。絶対または相対を宣言していないため、topは無視されます。

編集：本当の答えに、これを行います：

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

Answer 2

.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がディスプレイ付きのdiv内にある必要があるということtableです。

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;
}