Centering a div using flex and position: absolute - 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 div using flex and position: absolute

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.flex-container {<!--from  w  w  w .j  a v a  2  s  . co m-->
   display:-webkit-box;
   display:-ms-flexbox;
   display:-webkit-flex;
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   width:100%;
   height:301px;
   background:Chartreuse;
}

.flex-overlapping-item {
   position:absolute;
   margin:auto;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <div class="flex-container"> 
    <div class="flex-overlapping-item"> 
     <h3>Drag photo here</h3> 
     <p>Photo must have 1000px x 1000px</p> 
    </div> 
    <div class="flex-overlapping-item drag-zone"> 
     <div class="drag-zone-content"> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials