Center Align Vertically

 We dont have a responsive vertical central alignment element in HTML, but we can workaround this using a jquery or css.

Jquery Solution

?

1 2 3 4

$( document ).ready(function() {     $(".vcenter").css("position" ,"relative");     $(".vcenter").css("top" ,($(".vcenter").parent().height()/2) -($('.vcenter').height()/2) ); });

$( document ).ready(function() {
    $(".vcenter").css("position" ,"relative");
    $(".vcenter").css("top" ,($(".vcenter").parent().height()/2) -($('.vcenter').height()/2) );
});

HTML

?

1 2 3 4 5	<div>     <p class="vcenter">         <strong>Datosys</strong> is a group of engineers who are working on to secure the future of human health and environment.     </p> </div>

<div>
    <p class="vcenter">
        <strong>Datosys</strong> is a group of engineers who are working on to secure the future of human health and environment.
    </p>
</div>

Output

OR

CSS Solution

?

1 2 3 4 5 6 7 8	.vcenter {     position: relative;     top:50%;     transform: translateY(-50%);     -webkit-transform: translateY(-50%);     -o-transform: translateY(-50%);    -ms-transform: translateY(-50%); }

 .vcenter {
    position: relative;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
}