html - vertically align a text in a responsive div -

i have following code vertical div

css

.container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; padding: 20px; text-align: center; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); border-radius: 25px; 

}

html

<div class="container">   random text      </p>   random text   random text      </p>   random text   random text      </p>   random text </div> 

i having trouble figuring out how in div put text vertically aligned , responsive ?

jsfiddle code: https://jsfiddle.net/h49xx972/

try following - works me on codepen. added css id centered text (i assume both vertical , horizontal requirement)

css

.container {     position: absolute;     left: 50%;     top: 50%;     transform: translate(-50%, -50%);     width: 60%;     height: 60%;     padding: 20px;     text-align: center;     box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);     border-radius: 25px; }  #text_container {     position: relative;   top: 50%;   transform: translatey(-50%);  } 

updated html

<div class="container">   <div id="text_container">   random text      </p>   random text </div> </div> 

my codepen

http://codepen.io/anon/pen/kdkdax

thx