Centering a wrapped flex container to cover the full page - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Center

Description

Centering a wrapped flex container to cover the full page

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.params-order.overlay {<!--from   ww w . j  a  v a  2  s  .c om-->
   display:flex;
   flex-direction:column;
   position:fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-color:Chartreuse;
   z-index:1000000;
   justify-content:center;
   align-items:center;
   border:6px solid yellow;
}

.params-order.overlay .overlay-title {
   margin:6% 6% 3%;
   color:blue;
   text-align:center;
   text-shadow:3px 3px 3px black;
   border:3px solid pink;
}

.params-order.overlay .params-list {
   display:flex;
   margin:6%;
   flex-flow:row wrap;
   justify-content:center;
   align-items:center;
   height:301px;
   border:3px solid WhiteSmoke;
}

.params-order.overlay .params-list-item {
   background-color:OrangeRed;
   border-radius:6px;
   padding:6px 16px 6px 26px;
   margin:11px;
   list-style-type:none;
   width:201px;
   position:relative;
   font-size:2.5em;
   cursor:move;
}

.params-order.overlay .params-list-item::before {
   content:'';
   position:absolute;
   left:8px;
   top:20%;
   height:65%;
   width:7px;
   border:3px dotted grey;
   border-top-width:0;
   border-bottom-width:0;
   box-shadow:none;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="overlay params-order"> 
   <h3 class="overlay-title">Overlay title</h3> 
   <ul class="params-list"> 
    <li class="params-list-item">Draggable 1</li> 
    <li class="params-list-item">Draggable 2</li> 
    <li class="params-list-item">Draggable 3</li> 
    <li class="params-list-item">Draggable 4</li> 
    <li class="params-list-item">Draggable 5</li> 
    <li class="params-list-item">Draggable 6</li> 
    <li class="params-list-item">Draggable 7</li> 
    <li class="params-list-item">Draggable 8</li> 
    <li class="params-list-item">Draggable 9</li> 
    <li class="params-list-item">Draggable 10</li> 
    <li class="params-list-item">Draggable 11</li> 
    <li class="params-list-item">Draggable 12</li> 
    <li class="params-list-item">Draggable 13</li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials