How to center block using position?-CodePudding

I need your help. I have three parts of the page: header, main, footer. I try to center the main block so that it is in the center and deviates from the header by 150px. I'm trying to do this with position. The fact is that I can not center the block, and when I try to deviate from the header, my footer block disappears. Please tell me how to center the main block so that the footer block does not disappear and is always at the bottom. Thank you very much

html

<div *ngIf="fullArticle">
   <header >
      <img src="{{fullArticle?.imageUrl}}">
   </header>

   <main >
      <div>{{fullArticle?.title}}</div>
      <div>{{fullArticle?.summary}}</div>
   </main>
</div>

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

CodePudding user response：

It is better not to use positioning for this, if you change the template a little, you can implement it like this:

html:

<div *ngIf="fullArticle" >
   <header >
      <img src="{{fullArticle?.imageUrl}}">
   </header>

   <main >
      <div>{{fullArticle?.title}}</div>
      <div>{{fullArticle?.summary}}</div>
   </main>

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

CodePudding user response：

just opened a new account on stackOverflow and can't comment for now. But I wanted to some clarification on want you trying to do do.

You want to center the main block horizontally or vertically?
What do you mean by "center"? You mean in the middle of the webpage?
The footer seem to only cover the bottom left side of the webpage; Do you want the footer to be on top of the main block and header even if you scroll?

CodePudding user response：

If you mean horizontally centered, you almost have it. Your styles position the left edge of your div in the center of the page now you just need to shift the element relative to its reference point using transform: translateX(-50%); this will shift it to the left by 50% of its width. Here's a working example:

.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: 290px;
  height: auto;
  background-color: brown;
  transform: translateX(-50%);
  margin: 150px 0;
}

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

<div *ngIf="fullArticle">
  <header >
    <img src="https://via.placeholder.com/100">
  </header>

  <main >
    <div>{{fullArticle?.title}}</div>
    <div>{{fullArticle?.summary}}</div>
  </main>
</div>

<footer  (click)="backToHomePage()">
  <mat-icon>west</mat-icon>
  Back to homepage
</footer>