Responsive CSS option to center a button vertically and horizontally

Responsive CSS option to center a button vertically and horizontally without being concerned with parent element size *(using data attribute hooks for clarity and separation concerns)*

by CR Rollyson

HTML

<div data-element="card">
  <div data-container="button">
    <button>CALL-TO-ACTION</button>
  </div>
</div>

<!-- 
DATA-UI Responsive Center Button in Div 
Author: CR Rollyson @crrollyson
More at onestepclosertothedinosaur.info 
Details: Responsive CSS option to center a button vertically and horizontally without being concerned with parent element size (using data attribute hooks for clarity and separation concerns).
-->

CSS

body, html {
  background: #1d1d1d;
  height: 100%;
}

[data-element="card"] {
  background: #26293c; /*just for visual*/
  height: 100%; /*just for visual*/
  width: 100%; /* just for visual*/
}

[data-container="button"] {
  position: absolute;
  top: calc(50% - 20px); /* Button Height is 49px. Round up to 50px. Minus 30px for padding top and padding bottom. Remainder gives the amount to minus 50% by. 50px - 30px = 20px. calc(50% - 20px) */
  text-align: center;
  width: 100%;
}

button {
  background: #673ab7;
  border: 0;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.6);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,.6);
    -o-box-shadow: 0 2px 6px rgba(0,0,0,.6);
    box-shadow: 0 2px 6px rgba(0,0,0,.6);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: 400 12px/17px 'helvetica';
    letter-spacing: 1px;
    padding: 15px 22px 12px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .15s ease-in-out;
}

button:hover, button:focus {
  background: #e91e63;
      -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.8);
    -moz-box-shadow: 0 2px 8px rgba(0,0,0,.8);
    -o-box-shadow: 0 2px 8px rgba(0,0,0,.8);
    box-shadow: 0 2px 8px rgba(0,0,0,.8);
}