Div 和 Body 之间的奇怪差距

Question

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

但是当我在移动设备上查看时，还剩下一些未使用的 space

在上面这张图片中，左右各有一些 space 我该如何做到只剩下 50px？

Answer 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>

Div 和 Body 之间的奇怪差距

Weird Gap Between Div and Body

html

css

padding

quotes