提问人：Aditya 提问时间：7/30/2021 更新时间：7/30/2021 访问量：189
div 和身体之间的奇怪差距
Weird Gap Between Div and Body
问：
我有这个简单的html和css代码
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
position: absolute; top: 50%; left: 50%; background: #121212; color: #fff;
transform: translate(-50%, -50%); font-family: "Open Sans";
}
.container {
max-width: 500px;
font-style: italic;
background: #353535;
padding: 2em; line-height: 1.5em;
border-left: 8px solid #00aeff;
}
.container span {
display: block;
color: #00aeff;
font-style: normal;
font-weight: bold;
margin-top: 1em;
}<body>
<div class="container">
Creativity is just connecting things. When you ask creative people how they did something,
they feel a little guilty because they didn't really do it, they just saw something.
It seemed obvious to them after a while. That's because they were able to connect experiences
they've had and synthesize new things.
<span>Steve Jobs</span>
</div>
</body>但是当我在移动设备上查看此内容时，还剩下一些未使用的空间
在上面的这张图片中，左右都留有一些空间，我该如何做到只剩下 50px ？
答：
1赞
Lalji Tadhani
7/30/2021
#1
更改正文 CSS 使用Flex
body {
background: #121212;
color: #fff;
font-family: "Open Sans";
display: flex;
align-items: center;
justify-content: center;
min-height:100vh;
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #121212;
color: #fff;
font-family: "Open Sans";
display: flex;
align-items: center;
justify-content: center;
min-height:100vh;
}
.container {
max-width: 500px;
font-style: italic;
background: #353535;
padding: 2em; line-height: 1.5em;
border-left: 8px solid #00aeff;
}
.container span {
display: block;
color: #00aeff;
font-style: normal;
font-weight: bold;
margin-top: 1em;
}<body>
<div class="container">
Creativity is just connecting things. When you ask creative people how they did something,
they feel a little guilty because they didn't really do it, they just saw something.
It seemed obvious to them after a while. That's because they were able to connect experiences
they've had and synthesize new things.
<span>Steve Jobs</span>
</div>
</body>
评论