Div 和 Body 之间的奇怪差距答案

【问题标题】：Weird Gap Between Div and BodyDiv 和 Body 之间的奇怪差距
【发布时间】：2023-11-23 14:20:02
【问题描述】：

我有这个简单的 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>

但是当我在移动设备上查看时，还有一些未使用的空间

在上面的这张图片中，左右两边都有一些空间，我如何让它只剩下 50 像素？

【问题讨论】：

标签： html css padding quotes

【解决方案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>

【讨论】：