Bootstrap Align ICON do not vertically center with Text - css

Question

TL& DR: I am trying to make sure my left and right icons align with the center text which i have successfully been able to place directly in the CENTER of the screen.
As you can see below: If i put in a couple words or a small snippet block the left and right arrows do not look centered with the centered div.
Here are the thing I have tried unsuccessfully:
1) Tried to problematically do a count of the text and have it write a new style sheet each time. That just stinks and doesn't sound right? It didn't work anyway at least on ruby on rails. Level 10 stupid idea 5 hours wasted
2) I could require all TEXT in the WELL to be of a certain length but then that would put specific requirements coupled with the view Level 2 Stupid idea
3) Searched everywhere. As you can see, I was able to get the things centered on the screen, now its the small nuisances that are specific that a general tutorial or website can not teach.
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="pull-left centered_left">
<h1><span class="glyphicon glyphicon-menu-left "> </span> </h1>
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<div class="centered well">
<h1 class="crop"> My ICONS do not align with this text!</h1>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
<div class="pull-right centered_right ">
<h1> <span class="glyphicon glyphicon-menu-right "> </span> </h1>
</div>
</div>
</div>
</div>
mysyle.css
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
.centered_left {
position: fixed;
top: 49%;
left: 0%;
}
.centered_right {
position: fixed;
top:49%;
right: 0%;
}
h1.crop{
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
#media(max-width: 480px) {
h1 {
font-size: 12pt;
}
}

Answer 1

try changing your .centered_left, and .centered_right rules to this:
.centered_left {
position: fixed;
top: 50%;
left: 1%;
transform: translate(-50%, -50%);
}
.centered_right {
position: fixed;
top:50%;
right: -1%;
transform: translate(-50%, -50%);
}