1, verticle-align by: middle achieved element vertically centered, but display element must be inline-block (which is the most common method).
2, (written flex layout) to a parent of the element is provided display: flex; justify-content: center middle for the spindle direction, align-items: center to intersect the center axis (compatibility not intersect, only support above ie9 ).
3, (pseudo-element is added: before) pseudo-element to the parent element is added: before, to achieve vertical center of the sub-elements:
#father:before{
content;'';
display:inline-block;
varticla-align:middle;
height:100%;
}
4, (with display: table-cell write) to the parent element is set display: table; child element set display: table-cell.
5, (creates a hidden node) to create a hidden node #hide, that the height of hidden nodes is half the height of the remaining (hidden display of the node block).
#hide{
width: greater than 0 to;
height: the height of the remaining half;
}
6, (a transform) to the parent element set position: relative, child element set position: absolute; top: 50%; transform: translateY (50%), (this method is not compatible, only supports browser IE9 +) .
. 7, (line-height) set sub-element line-height of the parent element is equal height, this method is suitable for the case where the sub-element single line of text.
8, (a positioning position) to the sub-element is set position: absolute; top: 50% (set position of the positioning element, the distance is 50%); margin-top: negative half the height of the element (this method is compatible good, but not allowed to know the width and height elements).
9, (set margin elements) element is set to position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; (better compatibility, but it does not support ie7 browsers) .
Will first think of so many, when you want it and then modify it