0

I am a beginner front-end developer. I am currently creating a page consisting of subpages. The home page has:

  • At the very top of the menu
  • At the very bottom Footer
  • Title and text in the middle

The problem is that the title and text take up too little space on the page, so the Footer is not at the bottom, but right below this text. I would like the title and text to be right in the middle of the screen. I tried using display: flex (text-align: center, justify-content: center), width, height, margin, padding, vw, position: relative/absolute etc. I have no idea how to do it. After all, I can't type in the padding, e.g. 10rem, because it will be unnatural.

const Main: React.FC = () => {
    return (
        <div className={styles.section}>
            <div className={styles.position}>
                <div className={styles.main}>
                    <div className={styles.title}>
                        <h1>
                            Lorem ipsum dolor sit amet
                        </h1>
                    </div>
                    <div className={styles.text}>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Vivamus convallis, diam vel faucibus
                        volutpat, eros arcu luctus arcu, in porta
                        dui quam quis leo.
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Main;


.section {
    padding: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.position {
    width: 60%;
    align-items: center;
    justify-content: center;
}

.main {
    text-align: center;
}

.title {
    font-size: 3.5rem;
    padding-bottom: 2.2rem;
    font-weight: 700;
}

.text {
    font-size: 1.2rem;
    line-height: 1.9rem;
    padding-bottom: 2.3rem;
    font-weight: 400;
}

Please help me what to do so that the whole thing is centered on the whole screen and the footer is at the bottom of the screen. :(

.section {
  padding: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.position {
  width: 60%;
  align-items: center;
  justify-content: center;
}

.main {
  text-align: center;
}

.title {
  font-size: 3.5rem;
  padding-bottom: 2.2rem;
  font-weight: 700;
}

.text {
  font-size: 1.2rem;
  line-height: 1.9rem;
  padding-bottom: 2.3rem;
  font-weight: 400;
}
<div class="section">
  <div class="position">
    <div class="styles.main">
      <div class="title">
        <h1>
          Lorem ipsum dolor sit amet
        </h1>
      </div>
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis, diam vel faucibus volutpat, eros arcu luctus arcu, in porta dui quam quis leo.
      </div>
    </div>
  </div>
</div>
Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Joka
  • 11
  • 3
  • Can you post a working example please? – Sfili_81 Feb 10 '23 at 10:08
  • @Sfili_81 No. :/ I tried searching to see how another developer coded it, but unfortunately I couldn't find it. :/ – Joka Feb 10 '23 at 10:11
  • Does this answer your question? [Centering in CSS Grid](https://stackoverflow.com/questions/45536537/centering-in-css-grid) – Zach Jensz Feb 10 '23 at 10:13
  • 100% height on html and body, and with grid you can place-content center You can adapt this to your react app: html, body { height: 100%; display: grid; place-content: center; } – Zach Jensz Feb 10 '23 at 10:13
  • @ZachJensz True, it centers, but the entire page. I want it to center only the component. Menu (as Header) and Footer are set in the Layout component. When I added this to globals.scss, the entire page was centered. I also tried putting this into the .container class, but no change. :/ – Joka Feb 10 '23 at 10:20
  • I've shown you to the door, I can't open it for you. Put the grid code on what you want centered and set heights where you think appropriate – Zach Jensz Feb 10 '23 at 10:22

0 Answers0