CSS text vertical centering techniques

 I will write this article because it is quite simple to center horizontally in CSS. Just use text-align , but centering vertically is not so easy. In fact, it is not difficult to say, just use a little trick. To make the text vertically centered, this article uses the line-height technique.

CSS text vertical centering example

<DIV style="background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;">The
　test text is centered vertically
</DIV>

Present results

Test text vertically centered

From this example, you can see that the text has been centered in the vertical direction of the block, even horizontally.

To explain this grammar a little bit, we first wrap the text in the DIV block. In the style part, we set the background color (background-color:#C7FF91), width (width: 300px), height (height: 100px), Horizontal alignment (text-align: center) and the most important line-height100px.

Since the height of the DIV block is set to 100px, the line-height (line height) of the text is also set to 100px at this time, so it will naturally be centered vertically!