Featured image of post Centered login form with Ionic Framework

Centered login form with Ionic Framework

In this post, we well see how to design a vertically centered responsive login form with Ionic Framework, looking great on both smartphones and tablets.

This post was originally published in 2015 and may contain outdated information.

Designing a login form with Ionic Framework is very easy. I wrote this post for two reasons:

  • First, I find vertically and horizontally centered login forms in mobile applications beautiful, especially with a nice background image or pattern.
  • Secondly, I wanted a responsive login form that looks great on tablets. Many people use Ionic Framework to develop smartphone-only applications, but it is possible to make them look good on tablets with the Ionic responsive grid.

This isn’t a step-by-step tutorial, as there are just a few lines of code to write to achieve the expected login form design.

# The centered login form screenshot

Here is what it looks like. The screenshot was taken from Chrome’s mobile emulator and the mockup was made with Magic Mockups:

Centered login form with Ionic Framework

# The HTML code

<ion-view id="login" hide-nav-bar="true">
  <ion-content padding="true" scroll="false">
      <div class="row responsive-md">
        <div class="col col-50 col-offset-25">

          <div class="header padding text-center">
            <img src="img/logo.png" alt="Your logo here" />

          <div class="list">
            <label class="item item-input">
              <input type="email" placeholder="Email">
            <label class="item item-input">
              <input type="password" placeholder="Password">

          <button class="button button-block button-positive">
            Log In

          <div class="row row-no-padding">
            <div class="col">
              <button class="button button-clear button-light">
                Forgot password?

            <div class="col text-right">
              <button class="button button-clear button-light">
                Sign up

# The SCSS code

Here, we use the table-cell dispay with vertical-align to center the login form.

#login {
  background: #1c2627 url("../img/login_bg.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  .scroll-content {
    display: table !important;
    width: 100% !important;
    height: 100% !important;

    form {
      display: table-cell;
      vertical-align: middle;

      .header {
        padding-bottom: 20px;

        img {
          display: block;
          width: 80%;
          margin: 0 auto;

      .button.button-light.active, .button.button-light.activated {
        color: #fff;
        opacity: inherit;
Licensed under CC BY 4.0
Ko-fi donations Buy me a coffee