html - How to spread div verticaly to window size and center verticaly? -

so im trying center text div verticaly , spread window size responsive sizes. fiddle: https://jsfiddle.net/2b1wm0pv/

<div class="container">     <div class="col-md-12 col-sm-12 col-xs-12">         <div class="col-md-6 col-sm-6 col-xs-6">             <div class="error-number">404</div>         </div>         <div class="col-md-6 col-sm-6 col-xs-6">              <div class="error-small-title">error 404!</div>             <div class="error-big-title">oooops, error has occured!</div>             <div class="error-description">we sorry page looking not available anymore or have entered wrong address.</div>             <div class="col-md-5 col-sm-5 col-xs-5">             <div class="row">                 <div class="error-button">                     <a href="#" class="error-small-title">return homepage</a>                 </div>             </div>             </div>         </div>     </div> </div> 

to center text, set following css on text div, or wrapping div:

.selector {     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%); } 

and following on parent element of div:

.selector {     position: relative; } 

please note absolute positioned elements no long define parent elements size, it's highly recommended define width , height element.

to spread div it's page size u can use viewport (viewport = browser window) units: vw (width) , vh (height), 100 size of viewport, 50 half. different using %, since % relative size of parent. in css:

.selector {     width: 100vw;     height: 100vh; }