Centering a form in a div block

Question

The following stylesheet and CSS are provided:

index.html fragment

<div class="parent">
    <div class="child">
        <form>
            <input type="text"/>
            <br/>
            <input type="submit"/>
        </form>
    </div>
    <div class="helper"></div>
</div>

mycss.css fragment

.parent{
    width: 500px;
    height: 400px;
    text-align: center;
    border: 1px solid #dd0;
    background: #ffa;
}
.child {
    display:inline-block;
    vertical-align:middle;
}
.helper {
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
}

The result is given above. But this result is not clear to me. What is the role div.helperin this example?

In the style class div.parentwe have text-align: center;. Why without it we have only horizontal centering?

Why without vertical-align:middle;in div.childor div.helperdo we have only horizontal centering?

Answer 1

So, here it is div.helperused in modes display:inline-blockand vertcal-align:middleto make another vertically average in .parent.

and

text-align: center; used to place input elements on .parent

As stated above

vertcal-align:middle , .parent.

,

:

CSS :

diplay:table-cell; .parent div, .

vertical-align:middle ,

.parent {
width: 500px;
height: 400px;
text-align: center;
border: 1px solid #dd0;
background: #ffa;
display: table-cell;
vertical-align: middle;
}

CSS .helper div

FIDDLE DEMO