Vertical Alignment - C1 ASP.NET MVC

// This file locates: "Scripts/Lesson/C1FlexGrid/RowsStylingVerticalAlignment.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // make rows taller to show the vertical alignment
    theGrid.rows.defaultSize = 45;
    theGrid.columnHeaders.rows.defaultSize = 65;
    theGrid.allowResizing = 'Both';
    theGrid.deferResizing = true;
   
    // use formatItem event to apply transform
    theGrid.formatItem.addHandler(function (s, e) {
        if (!e.cell.querySelector('input')) {
            e.cell.innerHTML = '<div class="v-center">' +
            e.cell.innerHTML +
          '</div>';
        }
    });
});

// This file locates: "Content/css/Lesson/C1FlexGrid/RowsStylingVerticalAlignment.css".
.wj-flexgrid {
  max-height: 250px;
}
.wj-cell .v-center {
  position: relative;
  top: 50%;
    transform: translateY(-50%);
  white-space: pre-wrap;
}
.wj-cell input[type=checkbox] {
  position: relative;
  margin: 0;
  top: 50%;
    transform: translateY(-50%);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: RowsStylingVerticalAlignment
        public ActionResult RowsStylingVerticalAlignment()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingVerticalAlignment_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingVerticalAlignment_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingVerticalAlignment_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingVerticalAlignment_Text3)
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model)