Question

我正在使用Angular Material编写一个Angular应用程序。我希望在顶部有一个固定的导航栏，在下面有一个主要的内容区域。像这样：

---------------------------------------
            FIXED NAVBAR
---------------------------------------
|                                     |
|         MAIN CONTENT AREA           |
|                                     |
|                                     |

在这个主要内容区域中，我希望能够将卡片放在主区域的中间位置（不在整个网络的中间，我不想考虑导航栏）。

我的app.component.html：

<mt-toolbar color="primary"></mt-toolbar>

<div class="container">
   <router-outlet></router-outlet>
</div>

app.component.css：

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 64px;
 }

这是导航栏的代码：

HTML

<mat-toolbar class="fixed-top" color="primary"></mat-toolbar>

CSS

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
}

现在，如果<router-outlet></router-outlet>显示仅包含元素的LoginComponent，我该如何将此元素置于主区域的中间位置？

Answer 1

router-outlet {
   margin: 0 auto;
}

或者您可以使用https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Answer 2

不确定这是否是你所要求的，但是如果你希望它留在那个地方（不要移动那么多）你可以让父元素位置相对，然后你想要居中的项目位置绝对然后你可能会到达某个地方。另外你添加

.you-class {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

如果不起作用，请尝试：

top: 50%;
transform: translateY(-50%);

也许this will help

Answer 3

在您想要居中的元素上使用display: table-cell和vertical-align: middle。

在父母身上使用display: table。

如何将元素置于屏幕中心（不带导航栏）

3 个答案: