div의 요소 가운데 맞추기

Question

div 내에서 알림 메시지를 가운데에 놓으려고 시도했지만 top:50%을 시도했지만 작동하지 않습니다. 일부 패딩을 넣으려고했는데 그 방법이 마음에 들지 않았습니다. 여기 피들을 볼 수 있습니다. :

.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 규칙 http://jsfiddle.net/VPdmT/은 요소의 위치가 정적 이외의 다른입니다에 적용 할 수 있습니다. 절대 또는 상대를 선언하지 않았으므로 top은 무시됩니다.

편집 : 진짜 대답에은 이렇게 :

.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/ 이 링크는 이미지를 가운데에 놓는 방법을 보여줍니다. 몇 가지 개조하면 효과가있을 것입니다.