The CSS calc() function

CSS calc function lets you calculated the values inside your CSS. So you can change the values of the size of the elements dynamically.

So no more media queries with fixed values.

Check out the following code, No matter what size the screen is the div will be always vertically aligned to the centre.

<div class="box"></div>

.box {
 width: 100%;
 height: 200px;
 margin-top: calc(50vh - 100px);
 background-color: yellow;
}

Feel free to click the “Edit in JSFiddle” link and resize the result window.