The text with an indefinite width is vertically centered in the div, And the div is vertically centered.

The text with an indefinite width is vertically centered in the div, And the div is vertically centered.

I was asked during the interview: How can I vertically center a paragraph of variable width and height text?

Here we will 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.
</Div>
</Div>

Method 1:

# Main {
Position: relative; // use relative positioning in the parent Element
Width: 200px;
Height: 200px;
Overflow: hidden;
Background-color: # ff0;
Padding: 10px;
}
# Login {
Position: absolute;/* use absolute positioning in sub-element */
Top: 50%;/* 50% higher than the parent element */

Left: 50%;

Background-color: # eee;
-Webkit-transform: translate (-50%,-50%);/* CSS3 style,: translate (-50%,-50%)-50% to itself */
}

Method 2:

# Main {
Width: 200px;
Height: 200px;
Background-color: # eee;
Display: table;/* display the label element as a table */
}
# Login {
Display: table-cell;/* Neither ie7 nor ie6 can recognize display: table-cell ;*/
Vertical-align: middle;
}

Today is the first write essay, starting from the basics. Come on!