如何使用位置居中块?

Question

我需要你的帮助。这一页有三部分:header,main,footer。我尝试将main块居中，使其位于中心并偏离header150px。我正试图这样做与position。事实是，我无法将块居中，当我试图偏离header时，我的footer块消失了。请告诉我如何将main块居中，使footer块不消失，始终在底部。非常感谢

html

<div *ngIf="fullArticle">
<header class="img_header">
<img src="{{fullArticle?.imageUrl}}">
</header>
<main class="article_details_content">
<div>{{fullArticle?.title}}</div>
<div>{{fullArticle?.summary}}</div>
</main>
</div>
<footer class="footer" (click)="backToHomePage()">
<mat-icon>west</mat-icon>
Back to homepage
</footer>

scss

.img_header{
position: relative;
width: 100%;
height: 217px;
img{
width: 100%;
height: 100%;
}
}
.article_details_content{
position: absolute;
left: 50%
right: 50%
width: 1290px;
height: auto;
background-color: brown;
}
.footer{
position: fixed;
bottom: 0;
}

Answer 1

最好不要使用定位，如果你稍微改变一下模板，你可以这样实现:

html:

<div *ngIf="fullArticle" class="fullArticle">
<header class="img_header">
<img src="{{fullArticle?.imageUrl}}">
</header>
<main class="article_details_content">
<div>{{fullArticle?.title}}</div>
<div>{{fullArticle?.summary}}</div>
</main>
<footer class="footer" (click)="backToHomePage()">
<mat-icon>west</mat-icon>
Back to homepage
</footer>
</div>

scss:

.fullArticle {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.img_header{   
width: 100%;
height: 217px; 
}
.article_details_content{
flex-grow: 1;
}

Answer 2

如果你指的是水平居中，那就差不多了。你的样式定位你的div的左边缘在页面的中心，现在你只需要移动元素相对于它的参考点使用transform: translateX(-50%);，这将移动它到左边的宽度的50%。如果你想让它与页眉重叠，添加一个负的上边距。
下面是一个工作示例:

.img_header {
position: relative;
width: 100%;
height: 217px;
}
.img_header img {
width: 100%;
height: 100%;
}
.article_details_content {
position: absolute;
left: 50%;
right: 50%;
width: 80%;
height: auto;
background-color: brown;
transform: translateX(-50%);
margin-top: -150px;
}
.footer {
position: fixed;
bottom: 0;
}

<div *ngIf="fullArticle">
<header class="img_header">
<img src="https://via.placeholder.com/100">
</header>
<main class="article_details_content">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id laoreet mi. Nam posuere dictum odio non tristique. Morbi risus enim, laoreet sed viverra in, rutrum id tortor. Integer ac sem posuere, volutpat ex rutrum, malesuada sapien. Pellentesque
laoreet leo elit, quis mollis velit pulvinar in. Nunc a vehicula ante. Maecenas tristique leo vel dui finibus aliquam. Phasellus rhoncus sagittis fringilla. Aliquam id est congue metus lacinia aliquet. Proin ultrices imperdiet tempor. Donec iaculis
lectus ligula, in efficitur dui dictum vestibulum. Aenean scelerisque ut massa ut sollicitudin. Cras dapibus ex vel neque accumsan tincidunt. Integer in magna iaculis, laoreet ipsum in, semper massa. Suspendisse porttitor, justo ut porttitor vestibulum,
sapien elit mollis orci, nec tincidunt turpis lorem nec velit. Morbi magna magna, ultrices quis elit ac, gravida placerat dolor. Integer faucibus vehicula velit non vestibulum. Integer mollis risus sed vestibulum pretium. Morbi quis lacus lobortis,
egestas risus sed, venenatis eros.
</div>
</main>
</div>
<footer class="footer" (click)="backToHomePage()">
<mat-icon>west</mat-icon>
Back to homepage
</footer>

Answer 3

刚刚在StackOverflow上开了一个新帐户，现在不能评论。但是我想澄清一下你想要做的事情。

1. 你想让主体块水平居中还是垂直居中?
2. 你说的"居中"是什么意思?你是说在网页中间吗?
3. 页脚似乎只覆盖了网页的左下角;您是否希望页脚在主块和页眉的顶部，即使你滚动?

#解决方案?#

看起来你想让标题在背景上，主块在标题的顶部，但是主块必须在标题结束前大约157px开始。这里是scss

.img_header{
position: absolute;
width: 100%;
height: 217px;

img{
width: 100%;
height: 100%;
}
}

.article_details_content{
position: absolute;
top: 157px;
left: 10%;
right: 10%;
width: 80%;
height: 50vh;
background-color: brown;
}

.footer{
position: fixed;
bottom: 0;
}