单页滚动网站第一屏文本响应式垂直居中适配问题求助

Hey there! Let's sort out that centering problem and clean up a few code issues—you're almost there, just a couple key tweaks will make your page look great on both mobile and desktop.

First, let's address a quick HTML structure mistake: you're putting a <li> inside an <h1> tag, which isn't valid HTML (headings can't contain list items). That can mess up layout and accessibility, so we'll fix that first.

The Root of Your Centering Problem #

Using fixed or percentage-based padding-top for centering is tricky because:

• padding-top: 50% is calculated based on the width of the parent element, not height. So on wide desktop screens, this pushes your content way down.
• Fixed values like padding-top: 7 (I assume you meant 7% or 7rem?) don't scale well across different screen heights.

The Solution: Flexbox for Responsive Centering #

Flexbox is perfect for this—it automatically centers content vertically and horizontally regardless of screen size. Here's how to implement it:

Step 1: Fix Your HTML Structure

Move the "about me" description out of the <h1> and use a proper text element like <p>:

<div class="main">
  <section class="page1">
    <h1>ABOUT ME</h1>
    <p class="notnav">I am John, 19 years old computer science student. Mainly coding in python, but I am quick lerner and flexible person. I am currently intrested in Artificial Intelligence, Big Data and Design</p>
    <h2><a class="read-more" href='/about'>Read More</a></h2>
  </section>
  <section class="page2">
    <h1>PROJECTS</h1>
  </section>
  <section class="page3">
    <h1>CONTACT</h1>
  </section>
</div>

Step 2: Update Your CSS with Flexbox

Modify your .page1 styles to use flexbox, and adjust text styles for better responsiveness:

section { 
  width: 100%; 
  height: 100vh;
}
.main section.page1 { 
  background: #81D4FA;
  /* Add flexbox properties for vertical centering */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers content vertically in the viewport */
  align-items: flex-start; /* Keeps content left-aligned like your original setup */
  padding: 0 15%; /* Adds horizontal padding to prevent text from touching edges */
}
.main section.page2 { background: #F5F5F5; }
.main section.page3 { background: #81D4FA; }

h1 { 
  font-size: 8vw; 
  color: #efefef;
  margin: 0 0 1rem 0; /* Adds space below the heading */
}
h2 { 
  font-size: 4vw; 
  color: #efefef;
  margin: 1rem 0 0 0; /* Adds space above the "Read More" button */
}
a.read-more{ 
  border: 2px solid #efefef; 
  text-decoration: none; 
  color: inherit;
  padding: 0.5rem 1rem; /* Makes the button easier to tap on mobile */
}
.notnav { 
  font-size: 3vw; 
  color: #efefef;
  margin: 0.5rem 0; /* Adds vertical space around the description */
  line-height: 1.5; /* Improves readability on all screen sizes */
}

Why This Works #

• display: flex on .page1 turns it into a flex container, so its child elements (h1, p, h2) automatically align based on your flex settings.
• justify-content: center ensures your content stays vertically centered within the full-height section, no matter if it's a phone or desktop screen.
• Replacing individual text padding with section-wide padding keeps your layout consistent and easier to maintain.

If you want fully centered content instead of left-aligned, just swap align-items: flex-start with align-items: center and remove the padding: 0 15% from .page1.

内容的提问来源于stack exchange，提问作者bazzuk123