Как центрировать карточку входа на Framework7?

Question

Я бы хотел центрировать карточку входа, но я этого не делаю.На данный момент карта остается в верхней части страницы.Я написал этот класс.

.card-center {
  margin-left: auto;
  margin-right: auto;
}

, но это не помогло решить проблему ... Я также попытался использовать класс align-content-center

Это моя страница входа

    <div data-name="login" class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content ">
    <form id="form-login">
        <div class="row justify-content-center">
            <div class="col-100 tablet-80 desktop-50 ">
                <div class="card head-card-forest card-center">
                    <div class="card-header">
                        <span></span><h2>Login</h2><span></span>
                    </div>
                    <div class="card-content card-content-padding">                             
                        <div class="row">
                            <div class="col-100 tablet-auto desktop-auto">
                                <div class="list no-hairlines-md">
                                    <ul>
                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Username</div>
                                                <div class="item-input-wrap">
                                                    <input type="text" name="username"  placeholder="Username">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>

                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Password</div>
                                                <div class="item-input-wrap">
                                                    <input type="password" name="password"  placeholder="Password">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="block">
                                    <div class="row">
                                        <a class="col button button-fill" id="button-login" onclick="login()"> Login </a>
                                    </div>                                      
                                </div>
                            </div><!--col-->                                    
                        </div><!--row-->
                    </div><!--card-content-->
                </div><!--.card-->                              
            </div><!--.col-->                   
        </div><!--.row-->   
    </form>
</div> <!-- ./ page-content -->

Заранее благодарим за помощь!

Answer 1

Этот код ниже делает форму правильным центром страницы.

#form-login{
  width:300px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}

Answer 2

Поскольку вы не предоставляете какой-либо код, я могу только предположить и предоставить вам решение, которое должно работать

.tablet-80.desktop-50{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

Примечание. Я тестировал этот код на демонстрационной странице входа Framework7, см. Изображение ниже