Vertically center alignment in BootStrap3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="row center" style="border:1px solid black;">
  <div class="col-sm-4" style="background-color:white;">
   test
  </div>    
<div class="col-sm-8 ">
  test </br>
  test </br>
  test </br>
  </div>    
</div>


CSS

.center {  
  display:flex;
   align-items:center !important; 
   text-align:center;       
}

@media ( min-width:768px ) {
.center {
      display:flex;
      align-items:center !important;     
      text-align:center;     
  }
}

@media ( min-width: 992px ) {
   .center {     
     display:flex;
       align-items:center !important;      
       text-align:center;          
    }
}

@media ( min-width: 1200px ) {
    .center {      
       display:flex;
        align-items:center !important;      
        text-align:center;        
    }
}

CodePen

100% height two-column layout with header & footer.

CSS Part:

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    header, footer {
        position: fixed;
        left: 0;
        right: 0;
        height: 20px;
        background-color: red;
        /* Specify a background color so the content text doesn't
        bleed through the footer! */
    }

    header {
        top: 0;
    }

    footer {
        bottom: 0;
    }

    main {
        height: 100%;
        -moz-box-sizing: border-box;
        /* Ensure that the height of the element includes the  box border, 
           not just the content */
        box-sizing: border-box;
       
        border: 0;
        /* Leave some space for the header and footer to  overlay. */
        border-top: 20px solid white;
        border-bottom: 20px solid white;            
    }

    aside {
        background-color: green;
        width: 300px;
        height: 100%;
        float: left;
    }

    section#right {
        background-color: white;
        overflow:auto;
    }

    .clearfix{
        clear:both;
    }
</style>

HTML Part:

<!DOCTYPE html>
<html>
<head>
    <title>Full Height Body with header & footer</title>
<style>
  ....
</style>

</head>
<body>
    <header>&lt;header&gt;&lt;/header&gt;</header>
    <main>
        <aside id="left">&lt;aside&gt;&lt;/aside&gt;</aside>
        <section id="right">
            &lt;section&gt;&lt;/section&gt;
        </section>
        <div class="clearfix"></div>
    </main>   
    <footer>&lt;footer&gt;&lt;/footer&gt;</footer>
</body>
</html>

JSFIDDLE, CODEPEN

This solution is taken from this StackOverflow post.

AngularJS & Partial View

Main Home Page (Shell Page)

 <main>
    <aside>
        <ul>
            <li><a href="#/ViewContent">View Contents</a></li>
            .....
            .....
        </ul>
    </aside>
    <section id="dynamic-content">
        <ng-view> <!--partials are injected here--></ng-view>
     </section>
</main>

JavaScript Part-

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>

<script>
    var app = angular.module("app", ['ngRoute', 'ngResource']);
    app.config(function ($routeProvider) {
          $routeProvider.when("/ViewContent",
              {
                  templateUrl: "/Admin/ContentList",
                  controller: "ContentListController"
              }
          );
    });

    app.controller('ContentListController', function ($scope, $http) {
        $http.get('/Admin/GetContentList').success(function (response) {
                $scope.contents = response.data;
            });
    });
</script>

MVC Controller- Admin

//This returns only html without any data.
public ActionResult ContentList()
{
    return View("ContentList");
}

//Returns data
public JsonResult GetContentList()
{
    List<Content> contents = new List<Content>();
    using (OleDbConnection connection=new OleDbConnection(ConnectionString))
    {
        using (OleDbCommand command=new OleDbCommand())
        {
            command.Connection = connection;
            command.CommandText = "SELECT....";
            connection.Open();
            OleDbDataReader reader = command.ExecuteReader(CommandBehavior.CloseConnection);
            while (reader.Read())
            {
                Content content = new Content();
                content.ContentId = reader["ContentId"].ToString();
                content.ContentTitle = reader["ContentTitle"].ToString();
                content.ContentTypeName = reader["ContentTypeName"].ToString();
                content.PublishDate = Convert.ToDateTime(reader["PublishDate"]).ToString("dd MMM yyyy");
                contents.Add(content);
            }
        }
    }
    return Json(new {success=true,data=contents }, JsonRequestBehavior.AllowGet);
}

Partial View: ContentList

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Type</th>
            <th>Publish Date</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="content in contents">
            <td>{{content.ContentTitle}}</td>
            <td>{{content.ContentTypeName}}</td>
            <td>{{content.PublishDate}}</td>
            <td><a href="/NewContent/EditContent?contentid={{content.ContentId}}">  Edit</a>&nbsp;&nbsp; 
                <a href="/NewContent/DeleteContent?contentid={{content.ContentId}}">  Delete</a> 
             </td>
        </tr>
    </tbody>
</table>

AngularJS – A Simple Form Submission

HTML Part –

        <form ng-submit="processForm()">
            <input type="text" name="loginName" ng-model="formData.loginName" />
            <input type="password" name="loginPassword" ng-model="formData.loginPassword" />
            <input type="submit" class="button" value="Submit" />
        </form>

JavaScript Part-

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
   var formApp = angular.module('formApp', []);
   function formController($scope, $http) {
      // create a blank object to hold our form information
      // $scope will allow this to pass between controller and view
      $scope.formData = {};

      // process the form
      $scope.processForm = function () {
      $http({
           method: 'POST',
           url: '/Admin/ProcessLogin',
           data: $.param($scope.formData),  // pass in data as strings
           headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
            })
            .success(function (response) {
                 console.log(response);
                 if (response.result=="success") {
                      if (response.loginresult == "failed") {
                          alert(response.message);
                      }
                      else {
                            window.location = response.redirecturl;
                      }
                 }

                });
            };
        }

    </script>

Server-side Part-

public JsonResult ProcessLogin(String loginName, String loginPassword)
{
    return Json(new { result = "success", loginresult = "success", redirecturl = "/Admin/AdminHome"}, JsonRequestBehavior.AllowGet);
}

Vertical align anything with just 3 lines of CSS

HTML Part:

<!DOCTYPE html>
<html>
<head> </title>
<body>
<section class="text">
  <p>I'm vertically aligned! Hi ho Silver, away!</p>
</section>
</body>
</html>

CSS Part:

body {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  background: #59488b;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
}

section {
  display: block;
  max-width: 500px;
  background: #433669;
  margin: 0 auto 1em;
  height: 140px;
  border-radius: .5em;
  color: white;
}

.text p {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
  text-align:center;
}

CodePen
This code has been taken from here

Absolute Horizontal And Vertical Centering In CSS

HTML Part

<html>
<head>
<style>...</style>
</head>
<body>   
    <div class="Parent-Container"> <!--this div is optional-->
      <p class="Absolute-Center">This is a paragraph</p>
    </div>
</body>
</html>

CSS Part

    <style>
        body{
            height:100%;
        }
      
        .Center-Container {
            position: relative; /*Position must be relative if it contains an absolute positioned element*/
            background-color: green;
            height: 300px; /*height is also required*/
        }

        .Absolute-Center {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            height:200px;width:400px; /*Height-Width must be declared*/
            background-color:red;
        }
    </style>

JsFiddle, CodePen, For more