居中一个元素在一个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显示该分区必须是内格与table显示。

Answer 2

顶部CSS规则只能应用于元素的，其位置比静态的任何其他。因为你没有声明绝对或相对，所以顶部被忽略。

编辑：在给真正的答案，这样做：

.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/ 此链接显示如何居中图像。它可能适用于你的一些调整。