英文:
Why this image is sometimes centered and sometimes not?
问题
我没有改变代码中的任何内容。
有时，当我加载页面时，图像在水平和垂直方向上都居中，但有时它只在水平方向上居中。
图像居中：
图像未居中：
.wavySectionContainer {
height: 100%;
width: 100%;
background-color: var(--primary);
position: relative;
}
.aboutMe,
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wavySectionContainer">
<img class="sun" src="public/sun.png" alt="Wave">
<p class="aboutMe">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia
cupiditate quae quos voluptatem dolorum?
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
英文:
I didn't change anything in the code.
Sometimes when I load the page the image is centered horizontally and vertically, but sometimes it is centered only horizontally.
Image is centered:
Image is not centered:
.wavySectionContainer {
height: 100%;
width: 100%;
background-color: var(--primary);
position: relative;
}
.aboutMe,
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wavySectionContainer">
<img class="sun" src="public/sun.png" alt="Wave">
<p class="aboutMe">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia
cupiditate quae quos voluptatem dolorum?
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
答案1
得分: 0
尝试这个，它会正常工作。
<!-- 开始代码段：不隐藏 JavaScript，启用控制台，不启用 Babel -->
<!-- 语言：CSS -->
.wavySectionContainer {
height: 100vh;
width: 100%;
background-color: blue;
position: relative;
}
.aboutMe,
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!-- 语言：HTML -->
<div class="wavySectionContainer">
<img class="sun" src="https://i.ibb.co/C23WVJ2/pngegg.png" alt="Wave">
<p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- 结束代码段 -->
英文:
Try this it will work fine.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wavySectionContainer {
height: 100vh;
width: 100%;
background-color: blue;
position: relative;
}
.aboutMe,
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!-- language: lang-html -->
<div class="wavySectionContainer">
<img class="sun" src="https://i.ibb.co/C23WVJ2/pngegg.png" alt="Wave">
<p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- end snippet -->
答案2
得分: 0
以下代码使用CSS Grid将段落放置在图像之上，然后使用align-items和justify-items将它们居中对齐。
html,
body {
height: 100%;
}
.wavySectionContainer {
height: 100%;
width: 100%;
display: grid;
grid-template-areas: "content";
align-items: center;
justify-items: center;
}
.aboutMe,
.sun {
grid-area: content;
}
<div class="wavySectionContainer">
<img class="sun" src="https://placekitten.com/200/300" alt="Wave">
<p class="aboutMe">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum?
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
英文:
The following code uses CSS Grid to place the paragraph atop the image and then centers them using align-items and justify-items.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html,
body {
height: 100%;
}
.wavySectionContainer {
height: 100%;
width: 100%;
display: grid;
grid-template-areas: "content";
align-items: center;
justify-items: center;
}
.aboutMe,
.sun {
grid-area: content;
}
<!-- language: lang-html -->
<div class="wavySectionContainer">
<img class="sun" src="https://placekitten.com/200/300" alt="Wave">
<p class="aboutMe">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum?
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- end snippet -->
(I do not have your image, so I used PlaceKitten.)
答案3
得分: -1
使用高度100vh（视窗高度）和宽度100vw（视窗宽度）
或者
使用固定的高度和宽度以像素（px）为单位，然后您将获得所需的输出。
.wavySectionContainer {
height: 100vh;
width: 100vw;
background-color: blue;
position: relative;
}
.aboutMe,
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wavySectionContainer">
<img class="sun" src="https://images.vexels.com/media/users/3/147002/isolated/lists/ebeb92f867932e57e096ebc64a3f884f-abstract-sunshine-rays-icon.png" alt="Wave">
<p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
英文:
Use height 100vh (viewport height) and width 100vw(viewport width)
OR
use fixed height and width in px(pixels) values, then you will get desired output.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wavySectionContainer {
height: 100vh;
width: 100vw;
background-color: blue;
position: relative;
}
.aboutMe,
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!-- language: lang-html -->
<div class="wavySectionContainer">
<img class="sun" src="https://images.vexels.com/media/users/3/147002/isolated/lists/ebeb92f867932e57e096ebc64a3f884f-abstract-sunshine-rays-icon.png" alt="Wave">
<p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论