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

重要的部分是带显示的 divtable-cell必须在带table显示的 div 内。

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