Aligning two flex items with one to the top, the other centered - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Aligning two flex items with one to the top, the other centered

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html {<!--   www.  j av  a  2  s.  co m-->
   height:100%;
}

body {
   height:100%;
   margin:0;
}

#wrap {
   display:flex;
   flex-direction:column;
   height:100%;
   background-color:Chartreuse;
   position:relative;
}

#top {
   flex:0 0 51px;
   width:100%;
   background-color:yellow;
}

#center {
   background-color:blue;
   width:201px;
   height:301px;
   position:absolute;
   left:51%;
   top:51%;
   transform:translate(-51%, -51%);
}
</style> 
 </head> 
 <body> 
  <div id="wrap"> 
   <div id="top"></div> 
   <div id="center"></div> 
  </div>  
 </body>
</html>

Related Tutorials