【发布时间】：2020-12-13 15:01:49
【问题描述】：
到目前为止，我正在开发一个纯 HTML、CSS 和 JS (FullPage.js) 的网站。
我的目标是当宽度为一定大小时，所有元素都以页面为中心，页面使用 fullpage.js 溢出
What I see at 320x668 resolution
到目前为止我遇到的问题如下，元素没有按预期居中并且重叠。
@media only screen and (max-width: 600px)
{
.s2
{
display: flex;
background-color: aqua;
flex-direction: column;
justify-content: center;
}
#abouttextdiv
{
width: 100%;
height: 100%;
}
#aboutTitle
{
font-family: fantasy;
width: 100%;
display: flex;
flex-direction: column;
padding: 10px;
left: 25%;
}
#makingtext
{
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
padding-top: 20px;
left: 25%;
}
#sparkletext
{
display: flex;
flex-direction: column;
transform: translate(-50%, -50%);
font-family: 'Pacifico';
background: rgb(255, 112, 184);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 100%;
}
#beach_icon
{
position: flex;
flex-direction: column;
font-size: 48px;
}
#camera_icon
{
position: flex;
flex-direction: column;
padding-bottom: 20px;
font-size: 48px;
}
.aboutimagediv
{
display: none;
}
#aboutParagraphOne
{
position: flex;
flex-direction: column;
transform: translate(-50%, -50%);
font-size: 2vh;
text-align: center;
width: 100%;
padding-bottom: 20px;
}
#aboutParagraphTwo
{
position: flex;
flex-direction: column;
font-size: 2vh;
transform: translate(-50%, -50%);
text-align: center;
padding-bottom: 10px;
padding-top: 20px;
width: 100%;
}
#aboutParagraphThree
{
position: flex;
flex-direction: column;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2vh;
padding-bottom: 10px;
padding-top: 20px;
width: 100%;
}
}<section class="section s2" id="aboutUs">
<h1 id="aboutTitle">About Us</h1>
<div class="aboutimagediv">
<img src="Media/Images/About_Page/hennaAndNails.jpg" alt="Image of Woman's nails with Glitter and Henna" class="aboutimage">
</div>
<div class="abouttextdiv">
<h2 id="makingtext">Making your day </h2>
<h2 id = "sparkletext">Sparkle</h2>
<!--<p id = "tagline">We run booths at events all around County</p><!-->
<!-- <p id="aboutParagraphOne">As a small business in Area,<br> we love all things glitter and Shine</p><!-->
<!-- <p id="aboutParagraphThree">You can find us at all the best events, <br> festivals and parties around Area!</p><!-->
<p id="aboutParagraphOne">Our main aim is to sparkle and shine where ever we go. <br> Creating happiness, laughter and a fun vibe to every second we are with you. From small events, large events or even a home event we are here to cater to your needs. </p>
<i class="material-icons" id="camera_icon">camera_alt</i>
<p id="aboutParagraphTwo">Our passion lies with making you <br> feel as great as you look </p>
<i class="material-icons" id="beach_icon">beach_access</i>
<p id="aboutParagraphThree">Parties, festivals, fetes and carnivals wedding we cover them all. <br> Pampering, at your home or my home salon includes nail services to both fingers and toes. Bump Paintings can be accommodated at your home for your comfort or at my home salon if you're planning a surprise.</p>
</div>
</section>如果我不将“About Us”文本输入为absolute 并给它一个transform(-50%,-50%)，它似乎会强制它位于屏幕的左侧，而不是像我想象的那样位于死点。
如果有人可以帮助我发现我所缺少的东西，我将不胜感激。我知道这可能看起来很基本，但我对 W3CSchools 和类似资源的搜索并没有加深我的理解。
【问题讨论】：
标签： html css flexbox responsive