Login Screen- Not full size page

I want to show in a panel or div in the middle of the screen as in the picture below. The display for the side or straight does not matter I want you all kinds seem that way. How can I do it.

According to your current description, it is just a pure CSS problem, can you clarify some more?

<ion-header-bar class="bar-assertive" style="background-color:#1582dc;border-color:#1582dc">
    <h1 class="title">{{ 'PAGE_LOGIN_TITLE' | translate }}</h1>
    <!--<div class="buttons">
        <button class="button button-clear" ng-click="closeLogin()">Close</button>
<ion-content style="background-color:#1582dc">
    <form ng-submit="doLogin()" ;>
        <div class="list" id="login" style=" background-color:#fff; padding:5% 15% 15% 15%">
            <label class="item item-input item-floating-label">
                <span class="input-label">{{ 'LABEL_USERNAME' | translate }}</span>
                <input type="text" placeholder="{{ 'LABEL_USERNAME' | translate }}" ng-model="loginData.username">
            <label class="item item-input item-floating-label">
                <span class="input-label">{{ 'LABEL_PASSWORD' | translate }}</span>
                <input type="password" placeholder="{{ 'LABEL_PASSWORD' | translate }}" ng-model="loginData.password">
            <label class="item">
                <button class="button button-block button-positive" type="button" ng-click="doLogin()">{{ 'BUTTON_LOGIN' | translate }}</button>
            <label class="item">
                <button class="button button-block button-positive" type="button" ng-click="openRegister()">{{'BUTTON_REGISTER' | translate}} </button>
            <div class="row">
                <div class="col text-center">
                    <h4> {{ 'LABEL_LOGIN_WITH' | translate }}</h4>
            <div class="button-bar" title="Login with">
                <a class="button button-icon icon ion-social-facebook"></a>
                <a class="button button-icon icon ion-social-googleplus"></a>

Ok this my code. I want to change bacground color. But not all areas. I do not want to be like in the picture. Outside of the blue, the inside white

OMG, you don’t use separate css files and classes to define styles?

  1. The style you declare directly in your html will take the highest priority and overrides all other outer-source css files. Please only use it when you know what you are doing~

  2. Style definition won’t always inherit and make effect, in your case the background color-definition won’t affect the background-color for the input box. If we do it now in your way, put some more detailed styles directly to your input tags.

I am already experiencing this problem I did not know exactly what I’m doing. To do something like this, how should I design the screen. I really need help in this regard.