Vertical center - Fluid

In this example below you will see how to do a Vertical center - Fluid with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Vertical center - Fluid</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi vel iusto atque sint impedit? Perferendis ea facere totam quam esse laudantium illum, modi! Qui, doloribus?</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/vertical-center-fluid-gLYKaJ */
body {
  background-color: #333;
  font-family: sans-serif;
}

.container {
  background-color: #AAA;
  height: 400px;
  text-align: center;
}

.container::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  background-color: #FDD;
  display: inline-block;
  padding: 8px;
  vertical-align: middle;
  width: 25%;
}

Comments