CSS Angular 2 Material - 如何居中进度微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41388091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 Material - How To Center Progress Spinner
提问by user2085143
I have implemented the Angular 2 progress spinner from the below link
我已经从下面的链接实现了 Angular 2 进度微调器
https://github.com/angular/material2/tree/master/src/lib/progress-spinner
https://github.com/angular/material2/tree/master/src/lib/progress-spinner
I would like to have it centered, however, the only way I can seem to get it to work is to remove the
我想让它居中，但是，我似乎可以让它工作的唯一方法是删除
display: block
from the CSS. However, this causes the spinner to appear huge on the page.
来自 CSS。但是，这会导致微调器在页面上显得很大。
Any advice would be great.
任何建议都会很棒。
回答by Andriy
just add margin rule:
只需添加保证金规则：
<md-progress-spinner style="margin:0 auto;"
mode="indeterminate"></md-progress-spinner>
plunker: http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview
plunker：http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview
UPDATE
更新
Just wanted to share and demonstrate 3 other general centering solutions
只是想分享和演示其他 3 个通用定心解决方案
- FLEX:
- 柔性：
.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>- GRID:
- 网格：
.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>- SAME HEIGHT AND LINE HEIGHT + TEXT ALIGN
- 相同的高度和线高 + 文本对齐
.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>回答by Gy?rgy Balássy
This CodePen helped me to create a page-centered spinner with Material Design in Angular 4: https://codepen.io/MattIn4D/pen/LiKFC
这个 CodePen 帮助我在 Angular 4 中使用 Material Design 创建了一个以页面为中心的微调器：https://codepen.io/MattIn4D/pen/LiKFC
Component.html:
组件.html：
<div class="loading-indicator">
<mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner>
</div>
Component.css:
组件.css：
/* Absolute Center Spinner */
.loading-indicator {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading-indicator:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
回答by Worthy7
The first answer doesn't work unless height is set in a parent element.
除非在父元素中设置了高度，否则第一个答案不起作用。
I fixed it using fxFlex
我使用 fxFlex 修复了它
<div fxLayout="row" fxLayoutAlign="space-around center" style="height:100%">
<mat-spinner diameter="50" strokeWidth="5"></mat-spinner>
</div>
回答by user3515688
I am using angular 6 with material 2+ and used that CSS code:
我将 angular 6 与材料 2+ 一起使用，并使用了该 CSS 代码：
.mat-spinner {
position: relative;
margin-left: 50%;
margin-right: 50%;
}
