在卡的中心物化预加载器？

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的人应该真正融入这个功能。毕竟，没有人想要在屏幕的角落有一个预加载器。

如果你仍然坚持这一点，那么代码可能会有所帮助。

    <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>

试试这个。这对我很有用。

希望这会有所帮助。感谢。

Answer 2

将位置改为绝对，将top，left，right，bottom属性改为0，使得此加载器在垂直和水平方向上对齐中心。

.loaders {display: none;
         display: flex!important;
    align-items: start;
    position: absolute!important;
    z-index: 100;
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;
  }
  
  .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="row">
<div class="col s6">
                    
                    <div class="card green darken-1 hoverable">
<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-content loader-card  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>

</div>