When it comes to centering items with CSS, aligning things horizontally is relatively simple. However, the challenge arises when trying to center items vertically. Why can't we just use attributes like bottom-align:auto; top-align:auto; for vertical alignment, similar to how we do it for horizontal alignment? Why does something as seemingly straightforward as centering an item become so complex in the vertical direction compared to the simplicity of horizontal alignment? Despite the numerous methods available, let's consider a scenario where you need to center an element of unknown size within another element of unknown size.
I've spent almost two days grappling with this issue without finding a satisfactory solution. While there are several techniques for horizontal alignment, why hasn't a standardized CSS approach been devised for vertical centering? Is it considered taboo or fraught with consequences? Could it potentially lead to chaos or disaster? Are we really still in a time where JavaScript is required to accomplish something as fundamental as vertically centering an element inside another?
We're living in 2014 - doesn't it seem outdated to resort to using JavaScript for such a basic task as centering elements?
Edit: Code snippet illustrating my point: http://jsfiddle.net/VsakD/
CSS:
div.parentbox
{
width:500px;
height:500px;
border-style:solid;
}
div.childbox
{
width:300px;
height:300px;
border-style:solid;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}
HTML:
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>