Easy vertical/horizontal centering and aligning (Flexbox)

In this example below you will see how to do a Easy vertical/horizontal centering and aligning (Flexbox) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -Infamous, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -Infamous ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Easy vertical/horizontal centering and aligning (Flexbox)</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="container no-bootstrap-padding content-center-hori">
  <p>
    an object horizontally 
    centered according 
    to it's parent
  </p>
</section>

<section class="container no-bootstrap-padding content-center-vert">
  <p>
    an object vertically 
    centered according 
    to it's parent
  </p>  
</section>

<section class="container no-bootstrap-padding content-center-center">
  <p>
    an object horizontally & vertically
    centered according 
    to it's parent
  </p>  
</section>

<section class="container no-bootstrap-padding content-center-end">
  <p>
    an object vertically 
    centered and aligned to right (end) according 
    to it's parent
  </p>  
</section>

<section class="container no-bootstrap-padding content-center-bottom">
  <p>
    an object horizontally 
    centered and aligned to the bottom according 
    to it's parent
  </p>  
</section>

<section class="container no-bootstrap-padding content-right-bottom">
  <p>
    an object aligned to the right and bottom 
    according to it's parent
  </p>    
</section>

<section class="container no-bootstrap-padding content-inherit-height" id="growing-section" :class="{ grow : growSection }">
  <p>
    <span>bonus: </span>
    child inherits height of parent, 
    even if the parent changes according 
    to changing content. click button to see it happen.
  </p>
  <button @click="growSection = !growSection">grow parent</button>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-Infamous/easy-verticalhorizontal-centering-and-aligning-flexbox-vWxLVE */
/* not relevant to centering / aligning */

section,
p {
  border: 1px solid black;
}/*--adds borders to paragraph and sections*/

section {
  height: 100px
}/*--adds height to sections*/

p {
  margin: 0px;
}/*--removes paragraph default margin*/

.no-bootstrap-padding {
  padding: 0px;
}/*--removes bootstrap default 15px gutter / padding*/

span {
  font-style: bold;
  color: red;
}

button {
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
  border-radius: 5px;
  margin-left: 10px;
  margin-top: 10px;
  text-transform: uppercase;
}

.grow {
  height: 200px;
}
/* not relevant to centering / aligning */

/*-----------------------------------------------*/

/*centering / aligning classes below */

.content-center-hori {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}/*--centers children horizontally only*/

.content-center-vert {
  display: flex;
  align-items: center;
}/*--centers children vertically only*/

.content-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}/*--centers children vertically and horizontally*/

.content-center-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}/*--centers children vertically & aligns them to right*/

.content-center-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}/*--centers children horizontally & aligns them to bottom*/

.content-right-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}/*--aligns children to right and bottom*/

/* bonus flex capability */

.content-inherit-height {
  display: flex;
}/*--child will inherit height of parent even if it is dynamic*/


/*Downloaded from https://www.codeseek.co/-Infamous/easy-verticalhorizontal-centering-and-aligning-flexbox-vWxLVE */
// not relevant to css, just grows bonus div

new Vue({
  el: '#growing-section',
  data: {
    growSection: false
  }
});

Comments