How to align the div center both horizontally and vertically for kiosk

CSS code

.page-wrapper {
 /*margin: 10% 0 10% 0; */
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background: url("~/../img/grey_wash_wall.png") repeat #004B8D;
}

.page-wrapper .jumbotron { 
 width: 80%;
 height: 90%;
 background-color: #fff;
 
 position:absolute;
 left:0; right:0;
 top:0; bottom:0;
 margin:auto;
 
 max-width:100%;
 max-height:100%;
 overflow:auto;
}

HTML

<div class="page-wrapper">
 <div class="container">
   <div class="jumbotron">
       <p>Hello World!</p>
   </div>
  </div>
 </div>

Leave a Reply