There are many ways to achieve this here I use two methods, one is vertical-align and the other is align-items
The specific implementation is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
div{
display:table;
height:200px;
}
div p,div span{
display:table-cell;
vertical-align:middle;
}
div{
display:flex;
height:200px;
align-items:center;
}
</style>
</head>
<body>
<div>
<p>
Single line and multiple lines are vertically centered
</p>
</div>
<div>
<p>
Single row and multiple rows are centered vertically Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Lines are centered vertically Single line and multiple lines are vertically centered Single line and multiple lines are vertically centered Single line and multiple lines are vertically centered Single line and multiple lines are vertically centered
</p>
</div>
<div>
<p>
Single line and multiple lines are vertically centered
</p>
</div>
<div>
<span>
Single row and multiple rows are centered vertically Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Single row and multiple rows are vertically centered Lines are centered vertically Single line and multiple lines are vertically centered Single line and multiple lines are vertically centered Single line and multiple lines are vertically centered Single line and multiple lines are vertically centered Single line and multiple lines are vertically centered Single line and multiple lines are vertically centered
</span>
</div>
</body>
</html>
Let's talk about the vertical-align method first. Vertical-align is also used to center multiple lines. This attribute needs to be centered relative to the parent element, so the parent element also sets display:table; when writing this, it is indented. This is There are two span elements with different heights, so you can set the vertical-align property directly (the third article in the blog), but when there is only one element here, you need to set a display:table for the parent element relative to the parent element. Centered. This compatibility is better
Then the align-items attribute is in the flexible layout. As long as the browser of the higher version supports it, the compatibility is relatively poor.