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; }
Comments
Post a Comment