How could I center a div that is inside a div? Auto margins aren't working

Website where the issue exists When you login ( username: male / Password: male ), you see a sidebar at the right side. I've tried everything I can but i can't center the column of buttons on the right side. If you Inspect Element you can see that i set margin-left and margin-right to auto but it simply doesn't work. How could I center the class "optionsWrapper" in class "options"? Also how would i make class"options"'s height as long as the window? I have it at 100% right now but when i test it, its height is either too long or too short depending on the screen size that views the site.

Note: It looks somewhat okay on Chrome but on Firefox and Safari it looks abysmal and I have no idea why. Any help would really be appreciated!

HTML Setup:

      <div class='options'>
          <div class='optionsWrapper'>
              <div class='toggleButton' id='white'>
              </div>

              <div class='toggleButton'  id='yellow'>
              </div>

              <div class='toggleButton'  id='green'>
              </div>

              <div class='toggleButton'  id='red'>
              </div>

              <div class='toggleButton'  id='blue'>
                <a href="https://www.google.com/"><img class='settings_icon' src="Icons/Set 1/PNG/7.png"></a>
              </div>
          </div>
      </div>

CSS Setup:

.options{
  float: right;
  width: 100px;
  height: 100%;
  background: #444444 url("http://nickbrombal.com/images/bg_pixel-grey.jpg") repeat fixed;
  padding-top: 1.2%;
}

.optionsWrapper {
margin-left:auto;
margin-right:auto;
top: 50%;
position: absolute;
transform: translate(25%, -50%);
}

.toggleButton{
  width: 100%;
  height: 66px;
  margin-bottom: 30px;
  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
  cursor: pointer;
}