html - 如何在 Ionic 的正中心制作带有图像和文本的 div？

Question

我有一个登录屏幕。我想让它垂直和水平地居中。我的登录屏幕有一个带图像的标题。它也应该位于文本框的中心。

<ion-content>
    <div class="loginscreen">
        <div class="col-80 col-offset-10">
            <div class="row widthclass">
                <div>
                    <img src="img/clock.png" alt="clock" class="clockwidth"></img>
                </div>
                <div class="timesheettext2">
                    <h1 class="timesheettext">
                        <b>Timesheet Tracking</b>
                    </h1>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="formpadding col-80  col-offset-10">
                <form novalidate name="loginForm" ng-submit="doLogin(loginForm)">
                    <label class="item item-input labelusername">
                        <i class="icon  placeholder-icon"><img src="img/user.png" alt="" style="width:20px;height:20px;"/></i>
                        <input name="UserName" type="text" ng-model="User.UserName" placeholder="Username or Email" required>
                    </label>
                    <p ng-show="loginForm.UserName.$error.required && loginSubmitted" class="usernameerror">
                        Please provide username
                    </p>
                    <label class="item item-input labelpassword">
                        <i class="icon  placeholder-icon"><img src="img/password.png" alt="" style="width:20px;height:20px;"/></i>
                        <input type="password" name="password" id="password" ng-model="User.Password" placeholder="Password" required>
                    </label>
                    <p ng-show="loginForm.password.$error.required && loginSubmitted" class="usernameerror">
                        Provide password
                    </p>
                    <p ng-show="myflag">
                      Wrong credentials
                    </p>

                    <button class="button button-block button-lightgreen" type="submit">
                      <p class="login">
                        <b>Submit</b>
                      </p>
                    </button>
                </form>
            </div>
        </div>
    </div>
</ion-content>

我没有提供我的 CSS 文件；这有点复杂。如果你愿意，你可以更改我的类(class)。

Answer 1

只需提供以下 CSS 即可使您的屏幕垂直和水平居中。

.loginscreen {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

Fiddle