How to vertically center HTML objects whitin a container

How to vertically center HTML objects.

#How to vertically center HTML objects.

Only with pure HTML and CSS

Requirements:

- The height of the element's container must be known or specified.

index.html

<div class="vcenter-container">
  
  <div class="vcenter-item">Any kind of content</div>
  <div class="vcenter-item">Any kind of content</div>
  <div class="vcenter-item">Any kind of content</div>
  <!-- here comes the helper -->
  <div class="vcenter-helper"></div>
  
</div>

style.css

.vcenter-helper{
    display: inline-block;
    vertical-align: middle;
    height:100%;
    width:1px;
}

.vcenter-container{
    display:block;
    height:300px;
    /*  This value is an example, if the div that has to contain the
        elements to be vertically centered, shouldn't be displayed as a
        block element, you can use .vcenter-container within this
        element, and just set 100% height to vcenter-container          */
    width:100%;
}

.vcenter-item{
    display: inline-block;
    vertical-align: middle;
}