CSS Vertical Centering

1. line-height: single-line text vertically centered
Applies to the button drop-down box when the line height of a single line of text is set, the text is positioned vertically in the middle of the row height.

2.line-height + inline-block Vertical centering of multiple elements or multiple lines of multiple objects
Treating multiple elements or multiline elements as a row element requires that the data be wrapped in a layer, set to Inline-block, and use Inline-block instead of the height setting in the outer layer of the Inline-block object.
　　

<style>
. box{width:500px;       border:1px solid #f00;       Margin:auto;       line-height:200px; Text-align:center;}.       box. content{Display:inline-block;       Height:auto;       Line-height:1;       width:400px; Background: #ccc;} </style><Divclass= "box">    <Divclass= "Content">aaaaaaaaaa<ahref="">bbbbbbbbbbbbbb</a>CCCCCCCCCCCCCCCCCC</Div></Div>

3.:befor + inline-block Multi-Object CSS vertical centering
: Before pseudo-class element +inline-block attribute the advantage is that the sub-element center can not need to set a special height, will: before Pseudo-class element set to 100% high Inline-block, Collocation will be required in the play sub-elements are also set to Inline-block properties, you can use the Vertical-align:minddle to achieve vertical center

　　

　　

　　

CSS Vertical Centering