How do I center a button in an angular-ui-grid cell?

Question

I define a column as follows:

{
  name: 'button', 
  displayName: '', 
  cellClass: 'ui-grid-vcenter',
  enableColumnMenu: false,
  enableFiltering: false,
  enableSorting: false,
  cellTemplate: '<div><button ng-click="grid.appScope.rowButtonHandler(row.entity.id)">clicky</button></div>'
}

Resulting in:

<div class="ui-grid-cell ng-scope ui-grid-coluiGrid-010 ui-grid-vcenter" ui-grid-cell="" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name">
    <div class="ng-scope">
        <button ng-click="grid.appScope.rowButtonHandler(row.entity.id)"></button>
    </div>
</div>

I want to center this button vertically and horizontally. Horizontally, works, but vertically, I can't seem to get the CSS right. Here's my generic shot at it:

.ui-grid-vcenter div {
  text-align: center;
  vertical-align: middle !important;
  background-color: yellow !important;
}

How does one center content in a cell in this kind of AngularJS grid?

Answer 1

Use relative position:

.ui-grid-vcenter div {
  background-color: yellow !important;
  text-align:center;
  position: relative;
  top: 50%;
   -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}