How to vertically align a div - CSS

There are thousands of ways:

Line-height method

Example:              Vertically aligned text.     

Result:

#hijo {
    line-height: 200px; //Damos 200px de alto para notar el efecto
}

The CSS table method (CSS Table method)

Example:

<div id="padre">
    <div id="hijo">Contenido a centrar aquí.</div>
</div>

Result:

#padre {
    display: table;
    height:200px;
}
#hijo {
    display: table-cell;
    vertical-align: middle;
}

Absolute position and extension (Absolute Positioning and Stretching)

Example:

<div id="padre">
    <div id="hijo">Contenido aquí.</div>
</div>

Result:

#padre {
    position: relative;
}
#hijo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Div floating (Floater Div)

Example:

<div id="padre">
    <div id="flotante"></div>
    <div id="hijo">Contenido aquí.</div>
</div>

Result:

#padre {height: 250px;}

#flotante {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#hijo {
    clear: both;
    height: 100px;
}

Of this link take the examples. There are several more.

You can use the pseudo-elements : before + vertical-align: middle

html,
body {
  margin: 0;
}

.container {
  margin: 5px;
  background: #ccc;
  width: calc(100% - 10px);
  height: calc(100vh - 10px);
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
}

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

.element {
  display: inline-block;
  max-width: 300px;
  vertical-align: middle;
  white-space: normal;
}

p {
  margin: 0 0 0.5rem;
  text-align: center;
}

<div class="container">
  <div class="element">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in lectus quam.</p>
    <p>Praesent eget erat ut risus sodales ornare. Quisque quis pretium metus.</p>
  </div>
</div>

here I leave 2 options, which are what I use:

.centrarVerticalmente{

  position: absolute;
  height: 100px;
  background: red;
  top: 50%; 
  margin-top: -50px; /*mitad de la altura del div*/
  
}

.centrarVerticalmente2{

    height: 50px;
    background: yellow;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);

}

<!-- en caso que ya tengas un transform sobre el eje x -->
<div class="centrarVerticalmente">
     Div centrado verticalmente
</div>
<!-- en caso que no tengas un transform en el eje x -->
<div class="centrarVerticalmente2">
     Div centrado verticalmente
</div>

The second option is the best in my point of view, but already find an answer can be useful.