How do I vertically center text?

2018-06-14 15:36:27

This question already has an answer here:

How do I vertically center text with CSS? 34 answers

Flexbox

Flexbox allows you to vertically align the text without having a div with a fixed height . It is now supported by all the modern browsers.

Check my other answer to see all the problems and workarounds for Flexbox. The majority are for Internet Explorer.

display: flex;
align-items: center;

div {
  width: 50px;
  height: 100px;
  display: flex;
  align-items: center;
  border: 1px solid black;
}

<div>
  Test
</div>

链接地址: http://www.djcxy.com/p/41660.html