Vertical center - Fluid

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

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
Copyright oieduardorabelo ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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



  <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>



/*Downloaded from */
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%;