In Flexbox center vertically and horizontally in 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

In Flexbox center vertically and horizontally in full page

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,body, .section {
   width:100%;
   height:100%;
}

#about {<!--   ww w .  j a v  a2 s.  co m-->
   display:flex;
   justify-content:center;
   align-items:center;
}

.btn-about {
   -webkit-border-radius:3;
   -moz-border-radius:3;
   border-radius:3px;
   color:Chartreuse;
   font-size:2.9em;
   background:yellow;
   padding:2em 4em;
   text-decoration:none;
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <div class="section" id="about"> 
   <div class="element"></div> 
   <div class="btn-about">
     Wer bin ich? 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials