Three ways to vertically center text in a div with indefinite width and height

I was asked in the interview: How to make an indefinite width of the text vertically center it?

Now to summarize:

Write structure in body

<div id= "Main" >
<div id= "Login" >
DJSHDK awjdsd sede sfcdf vdj sh dkaw jds dse desf CDF VD jsh DKAWJD SDS Ede SFCDFV VD jsh DKAWJD SDS Ede SFCDFV.
</div>
</div>

Method One:

#main {
position:relative; Using relative positioning in parent elements
width:200px;
height:200px;
Overflow:hidden;
Background-color: #ff0;
padding:10px;
}
#login {
Position:absolute; /* Use absolute positioning in child elements */
top:50%; /* Height of 50% of the distance relative to the parent element */

left:50%;

Background-color: #eee;
-webkit-transform:translate ( -50%,-50%);/*css3 style, translate ( -50%,-50%) relative to its own distance from the x-axis and y-axis -50%*/
}

Method Two:

#main {
width:200px;
height:200px;
Background-color: #eee;
display:table; /* Make the LABEL element appear as a table */
}
#login {
Display:table-cell; Neither/*IE7 nor IE6 can recognize display:table-cell;*/.
Vertical-align:middle;
}