1.vertical-align: middle vertical alignment
Such as
2.text-align:center Text is centered horizontally
1. Single-line vertical centering
If there is only one line of text in a container, implement it on it Centering is relatively simple. We only need to set its actual height to be equal to the line-height of the row it is in. Such as:
ExampleSourceCode
DIV{ height:25px; line-height:25px; overflow:hidden; //The setting of overflow:hidden is to prevent the content from exceeding the container or causing automatic line wrapping} However, in Internet Explorer 6 In and below versions, this method does not support vertical centering of images.2. Vertical centering of multiple lines of text of unknown height
If the height of a piece of content is variable, then we can use the last element used to implement horizontal centering mentioned in the previous section. The first method is to set the Padding so that the upper and lower padding values are the same. Again, this is a way of "looking" vertical centering, it's just a way of making the text completely fill the
The advantage of this method is that it can run on any browser, and the code is very simple, but the prerequisite for the application of this method is a container The height must be scalable.