Alignment not working - html

Question

Alright so I was attemping to make these 4 divs inside a div be centered on the screen (both horizonally and vertically) but they are stuck to the upper edge of the <div>. Their position is not going down or anything, they are constantly on top.
/* Footer */
#footer {
width: 100%;
height: 400px;
background-color: red;
opacity: 0.5;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.arrange {
width: 20%;
height: 80%;
border: solid 1px black;
display: inline-block;
vertical-align: middle;
background-color: white;
}
<div id="footer">
<div class="arrange"> </div>
<div class="arrange"> </div>
<div class="arrange"> </div>
<div class="arrange"> </div>
</div>

Answer 1

you can try this. add this to your code.
display:flex;
justify-content:space-around;
align-items:center;
if you want your boxes to be side by side, change space-around with center.

Answer 2

vertical-align: middle doesn't work for your case, use instead these 3 lines of css for .arrange
position: relative;
top: 50%;
transform: translateY(-50%);
So your final css will be:
#footer {
width: 100%;
height: 400px;
background-color: red;
opacity: 0.5;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.arrange {
width: 20%;
height: 80%;
border: solid 1px black;
display: inline-block;
position: relative;
top: 50%;
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(7deg); /* IE 9 */
transform: translateY(-50%);
background-color: white;
}

Answer 3

just add 'padding top' to #footer and 'vertical-align' is no longer needed
<div id="footer">
<div class="arrange"></div>
<div class="arrange"></div>
<div class="arrange"></div>
<div class="arrange"></div>
</div>
<style>
#footer {
padding-top: 90px;
width: 100%;
height: 400px;
background-color: red;
opacity: 0.5;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.arrange {
width: 20%;
height: 80%;
border: solid 1px black;
display: inline-block;
background-color: white;
}
</style>

Answer 4

I did up a fiddle with some annotations to show you one method of doing what I think you're wanting to do.
* {
box-sizing: border-box; /* percentage calculations wont include border width and padding, but margin still messes with it, see calc below */
}
body {
width: 100vw;
}
#footer {
width: 100%;
height: 400px;
padding: 40px 5px; /* i added this top padding based on your wanting children to be 80% of parents height. 40 top, 40 bottom */
background-color: red;
opacity: 0.5;
text-align: center;
line-height: 12px;
overflow: hidden;
font-size: 0; /* eliminate ghost spaceing after inline blocks */
}
.arrange {
display: inline-block;
width: calc(25% - 10px); /* width% - margin */
height: 100%; /* 100% of parent minus padding of parent */
margin: 0px 5px; /* spacing, margin accounted for in calc of width, 5left + 5right = 10 */
font-size: 20px; /* reset font size */
border: solid 1px black;
background-color: white;
vertical-align: top;
}
<div id="footer">
<div class="arrange"></div>
<div class="arrange"></div>
<div class="arrange"></div>
<div class="arrange"></div>
</div>
fiddle
https://jsfiddle.net/Hastig/ypfcb2nb/1/