Weird Gap Between Div and Body

I have this simple html and css code

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

But when i view this on a mobile devices, there is some unused space left

Here in this image above there is some space left on left and right how do i make it so that only 50px is left ?

Solution

Change Body CSS Use 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>