css实现单行文本及多行文本垂直居中
方法一：用flex来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:14px;
padding:15px;
}
.demo{
overflow: hidden;
display: flex;
align-items: center;
}
.demo span{
display: inline-block;
}
.name{
width:50px;
}
.sex{
width:25px;
}
.card{
flex:1;
}
</style>
</head>
<body>
<div class="demo">
<span class="name">姓名姓名姓名姓名姓名姓名</span>
<span class="sex">男</span>
<span class="card">证件号码445544555544558887</span>
</div>
</body>
</html>方法二：display:table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:14px;
padding:15px;
}
.demo{
overflow: hidden;
display: table;
}
.demo span{
display: table-cell;
vertical-align: middle;
}
.name{
width:50px;
}
.sex{
width:25px;
}
.card{
width:calc(100% - 50px -25px);
}
</style>
</head>
<body>
<div class="demo">
<span class="name">姓名姓名姓名姓名姓名姓名</span>
<span class="sex">男</span>
<span class="card">证件号码445544555544558887</span>
</div>
</body>
</html>欢迎关注小程序，感谢您的支持！
