Align item to center in Flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Align item to center in Flexbox

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">
.flex-container {<!--from   w ww. j a va  2s .c  om-->
   display:flex;
   justify-content:space-around;
   align-items:center;
   height:351px;
   border:2px dashed Chartreuse;
}

.flex-container div {
   flex:0 2 201px;
   font-size:19px;
   background-color:yellow;
}
</style> 
 </head> 
 <body> 
  <div class="flex-container"> 
   <div class="reviews-text1">
     "about 1-2 sentences" 
    <p class="reviews-buyername1">-Name</p> 
   </div> 
   <div class="reviews-text2">
     "about 1-2 sentences" 
    <p class="reviews-buyername2">-Name</p> 
   </div> 
   <div class="reviews-text3">
     "about 1-2 sentences" 
    <p class="reviews-buyername3">-Name</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials