html - How to get the text in the custom dialog to be centered vertically -

i need help,

how go amending html or css markup below have text in custom dialog box, vertically centered in white space. here snapshot of problem:

and expected result:

here css:

#wrapper {     height: 100px;     width: 500px;     bottom: 50%;     right: 50%;     position: absolute; }  #container {     background: #fff;     left: 50%;     padding: 10px;     top: 50%;     margin: 0;     padding: 0;     height: 100%;     border: 2px solid rgb(100,139,170);     height: 100%;     position: relative; } .topbar {     cursor: pointer;     color: white;     background: rgb(100,139,170);     padding: 4px;     font-weight: bold; }  #text {   width: 100%;   height: 100%;   text-align: center; } 

here html:

<div id="wrapper">      <div id="container">          <div style="float:left;" class="topbar">custom dialog box</div><div class="topbar" style="text-align: right;">close</div>          <div id="text">this sample text appear here</div>      </div>  </div> 

fiddle is: https://jsfiddle.net/vc5xl1vy/

you going need set container display: table; , set children display: table-cell table header display: table-caption. have made few other modification header single div wrapper. jsfiddle: https://jsfiddle.net/1s45cdvs/1/

css

#wrapper {     height: 100px;     width: 500px;     bottom: 50%;     right: 50%;     position: absolute; }  #container {     background: #fff;     left: 50%;     padding: 10px;     top: 50%;     margin: 0;     padding: 0;     height: 100%;     border: 2px solid rgb(100,139,170);     height: 100%;     position: relative;     display:table; } .topbar {     cursor: pointer;     color: white;     background: rgb(100,139,170);     padding: 4px;     font-weight: bold;     display: table-caption; }  #text {   text-align: center;     display: table-cell;     vertical-align: middle; } 

html

<div id="wrapper">      <div id="container">          <div class="topbar">             <div style="float:left;" >custom dialog box</div><div style="text-align: right;">close</div>         </div>          <div id="text">this sample text appear here</div>      </div>  </div>