Flexbox is a easy way for modern browsers, so try this
**HTML**
<div class="container">
<div>align to center</div>
</div>
**CSS**
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background:green;
}
body, html{
height:100%;
}
Now the flexbox solution is a very easy way for modern browsers, so I recommend this for you:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background:green;
}
body, html{
height:100%;
}
<!-- language: lang-html -->
<div class="container">
<div>Div to be aligned vertically</div>
</div>
<!-- end snippet -->
