Вертикално подравняване на div елемент

Stanski82

Registered
Здравейте. Възникна проблем при опит да центрирам вертикално едно див-че. Ето го случаят:
<div id="wrapper">
<div class="box">
<div id="calc">
<input class="screen" />
<div class="first_row">
<button>%</button>
<button>*</button>
<button>/</button>
<button>C</button>
</div>

Това е html-a в частта, която ме интересува. Ето го и целият CSS:

#wrapper, body {
width: 100%;
height: 100%;
background-color: green;
}

.box{
width: 300px;
height: 450px;
background-color: white;
margin: 0 auto;
margin-top: 10%;
margin-bottom: 10%;
}

#calc{
width: 90%;
height: 90%;
border: solid red 3px;
margin-top: 10%;
margin-bottom: 10%;
margin: 0 auto;
}

.screen{
width: 90%;
height: 40px;
margin-left: 10px;
margin-top: 15px;
}

.first_row{
float: left;
}

button{
float: left;
margin-left: 10px;
margin-top: 15px;
width: 54px;
height: 50px;
}

.null{
width: 118px;
height: 50px;
}

Въпреки, че съм и на #calc margin auto и по 10% отгоре и отдолу, както съм го направил в .box рамката ми е лепната за горната част на бокса. Моля за идеи как да центрирам #calc в .box!
 
heytar каза:
https://jsfiddle.net/kccdcmym/1/
?

На Localhost ми излиза лепнато в бокса горе, вляво. Когато го отворя само с браузъра няма никакъв проблем, наистина. Не зная защо се получава така.
 

Горе