html - 在卡的中心实现预加载器？

Question

我正在使用实体化卡和预加载器。我想将加载器放置在卡的中心。

我将其与硬编码值的 margin 对齐，但这不适用于响应能力。 怎么做？

.loaders {
    display: flex!important;
    align-items: start;
    position: relative;
    z-index: 100;
    margin-top: 50px;
  }
  
  .loader-card
  {
      filter: blur(2px);
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="col s10 m6 l5 offset-s1">
                    <div class="preloader-wrapper small active loaders">
                        <div class="spinner-layer spinner-red-only">
                            <div class="circle-clipper left">
                                <div class="circle"></div>
                            </div><div class="gap-patch">
                                <div class="circle"></div>
                            </div><div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card green darken-1 loader-card hoverable">
                        <div class="card-content white-text">
                            <div class="left">
                                <h6>Total Sales</h6>
                                <h5>Rs. 5,60,000</h5>
                            </div>
                            <h5 class="right">
                                <a class="btn-floating waves-effect btn-large green">
                                    <i class="material-icons large">attach_money</i>
                                </a>

                            </h5>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>

Answer 1

我曾经遇到过同样的问题。我真的认为 materilaizecss 的人应该真正融入这个功能。毕竟，没有人希望在屏幕的 Angular 落有一个预加载器。

如果您仍然陷入困境，那么代码可能会有所帮助。

    <style type="text/css">
    #preloader-overlay {
        content: '';
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        z-index: 20000;
    }
    #preloader {
        display: none;
        position: fixed;
        z-index: 20001;
        overflow: show;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    </style>
    <div id='preloader-overlay' class="valign-wrapper">
        <div id="preloader" class="preloader-wrapper big active">
            <div class="spinner-layer spinner-red-only">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="gap-patch">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>
    </div>

试试这个。这对我来说效果很好。

希望这有帮助。谢谢。