Amigo, para conseguir centralizar a `div (central)` na pagina, você terá que aplicar um `position: absolute` na mesma, então necessariamente a `div (content)` não pode ter um `position: static`, neste caso terá de trabalhar com `relative`, `absolute` ou `fixed`

Para fazer a `div (central)` ocupar toda a pagina, então você deve fazer o `html` e o `body` também ocuparem toda a pagina, afinal o `height: 100%`é relativo ao tamanho do elemento pai.

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

    html, body {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #content {
        background-color: gainsboro;
        width: 100%;
        height: 100%;
    }

    #central {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 100%;
        height: 120px;
        margin: auto;
        background-color: white;
        box-shadow: 0px 0px 10px black;
    }

<!-- language: lang-html -->

    <div id="content">
        <div id="central">
            
        </div>
    </div>

<!-- end snippet -->

O truque para centralizar a `div(central)` é ancorar ela no topo e no final, para isto você vai precisar do `top: 0px` e `bottom: 0px`, mas ao fazer isto e deixar o `height: auto`, a `div(central)` vai ocupar todo o espaço da `div(content)`, um efeito semelhante a um `height: 100%`, então se especificamos um `height` e colocamos `margin: auto`, as margens irão crescer até a posição do `top: 0px` e o `bottom: 0px`;