純css 圖片自適應居中

html 結構

<div class="container">
        <div class="content"></div>
</div>

css

.container{
    width: 100%;
    height: 100%;
    text-align:center;
    position: fixed;
}
.container:after {
    display: inline-block;
    content: '';
    width: 0;
    height: 100%;
    vertical-align: middle;
}
.content{
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: middle;
    background: blue;
}