移动端按钮无法居中适配问题求助（附HTML/CSS代码）

Hey there! Let's fix those mobile button centering and responsiveness issues you're facing. I’ve gone through your code, and I can spot a few tweaks that’ll get things working smoothly across devices. Here’s the breakdown:

Key Issues in Your Current Code #

• The button uses a fixed font-size: 100px which will overflow or look way too big on small mobile screens.
• margin-top: 200px is a fixed value that won’t adapt to different viewport heights, leading to weird positioning on mobile.
• The .page uses visibility: hidden which keeps the element in the layout (taking up space) even when hidden—this can cause unexpected layout shifts.
• No responsive adjustments for touch targets (mobile buttons need enough padding to be easily tappable).

Fixed Code Solution #

Updated HTML #

<div class="container">
  <button type="button" data-toggle-page="#home" class="button">Home designing</button>
</div>
<div id="home" class="page">
  <div class="section">
    <h2 class="kitchen">Kitchen</h2>
  </div>
  <div class="section">
    <h2><a style="text-decoration: none" href="#Lounge">Lounge</a></h2>
  </div>
  <div class="section">
    <h2><a style="text-decoration: none" href="#Dining">Dining room</a></h2>
  </div>
  <div class="section">
    <h2><a style="text-decoration: none" href="#Hall">Hallway</a></h2>
  </div>
</div>

(Note: I fixed the anchor hrefs to use # prefixes for internal links—this is a small cleanup!)

Updated CSS #

/* Reset default browser styles first */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: url(image.jpg) no-repeat center center;
  background-attachment: fixed;
  background-size: cover; /* Better than 100% 100%—prevents image distortion on different aspect ratios */
  min-height: 100vh; /* Ensure body takes full viewport height */
}

.container {
  text-align: center;
  width: 100%;
  padding: 0 20px; /* Add side padding to prevent content touching screen edges on mobile */
}

.button {
  background-color: transparent; /* Shorthand for rgba(0,0,0,0) */
  margin-top: 40vh; /* Relative to viewport height—adapts to screen size */
  font-size: 10vw; /* Responsive font size: 10% of viewport width */
  color: #fff;
  font-family: 'Montserrat Subrayada', sans-serif;
  border: none;
  outline: none;
  padding: 15px 30px; /* Add padding for better touch target on mobile */
  cursor: pointer;
}

.page {
  position: fixed; /* Use fixed instead of absolute to cover the screen when visible */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8); /* Add a semi-transparent background to make content readable over the main background */
  display: none; /* Completely remove from layout when hidden (better than visibility) */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px; /* Space out sections nicely */
}

.section h2 {
  color: #fff;
  font-size: 5vw; /* Responsive heading size */
}

.section a {
  color: #fff;
}

What Changed & Why #

1. Reset Styles: Added a universal reset (* { margin:0; padding:0; box-sizing:border-box; }) to eliminate default browser margins/paddings that can break layout.
2. Responsive Font Sizes: Switched font-size from fixed px to vw (viewport width) so text scales automatically with screen size.
3. Relative Spacing: Used 40vh for margin-top instead of 200px—this keeps the button centered vertically across all device heights.
4. Better Background Handling: Changed background-size: 100% 100% to cover to prevent image distortion on screens with different aspect ratios.
5. Improved .page Layout:
   • Switched from visibility: hidden to display: none to remove the element from the layout when hidden (no more unexpected space).
   • Used position: fixed with flexbox to center all sections vertically and horizontally when the page is visible.
   • Added a semi-transparent background to make text readable over the main background image.
6. Touch-Friendly Button: Added padding to the button so it’s easier to tap on mobile devices.

To toggle the .page visibility, you’ll need a small JavaScript snippet (assuming you didn’t include it before):

document.querySelector('.button').addEventListener('click', function() {
  const page = document.getElementById('home');
  page.style.display = page.style.display === 'flex' ? 'none' : 'flex';
});

That should fix your centering and responsiveness issues while keeping the toggle functionality intact!

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