我已经从下面的链接实现了Angular 2 progress微调器
https://github.com/angular/material2/tree/master/src/lib/progress-spinner个
我想让它居中,然而,我似乎唯一能让它工作的方法就是go 掉
display: block
从CSS.但是,这会导致微调器在页面上显示得很大.
任何建议都是很棒的.
我已经从下面的链接实现了Angular 2 progress微调器
https://github.com/angular/material2/tree/master/src/lib/progress-spinner个
我想让它居中,然而,我似乎唯一能让它工作的方法就是go 掉
display: block
从CSS.但是,这会导致微调器在页面上显示得很大.
任何建议都是很棒的.
只需添加保证金规则:
<md-progress-spinner style="margin:0 auto;"
mode="indeterminate"></md-progress-spinner>
普朗克:http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview
UPDATE个
只是想分享和演示其他4种通用的定心解决方案
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
}
<div class="wrapper">
<div class="inner">INNER CONTENT</div>
</div>
.wrapper {
display: grid;
place-items: center;
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
}
<div class="wrapper">
<div class="inner">INNER CONTENT</div>
</div>
.wrapper {
line-height: calc(100vh - 20px);
height: calc(100vh - 20px);
text-align: center;
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
display: inline;
}
<div class="wrapper">
<div class="inner">INNER CONTENT</div>
</div>
.wrapper {
height: calc(100vh - 20px);
background: red;
position: relative;
}
.inner {
background: green;
color: white;
padding: 12px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wrapper">
<div class="inner">INNER CONTENT</div>
</div>