单行文本垂直居中对齐
在块元素中，让单行文本居中，可以使用line-height等于块元素的高，即可让该单行文本垂直居中对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
line-height: 200px;
background-color: #bfa;
height: 200px;
}
</style>
</head>
<body>
<p>
sdfasdfsdfasdf手动阀手动阀手动阀手动阀
</p>
</body>
</html>
多行文本垂直居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 只需要设置display:table-cell，并且让vertical-align:middle即可，可随p元素的高度变化都保持多行文本居中（效果见下图） */
p {
display: table-cell;
vertical-align: middle;
background-color: #bfa;
height: 200px;
}
</style>
</head>
<body>
<p>
sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀
sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀
sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀
</p>
</body>
</html>
应用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3766921_5avulu6dwfj.css">
<style>
* {
margin: 0;
padding: 0;
}
.box .box-item {
/* 让多行文本垂直居中 */
display: table-cell;
vertical-align: middle;
width: 150px;
height: 150px;
/* margin-right会无效 */
margin-right: 10px;
border: 1px solid red;
text-align: center;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item">
<i class="iconfont icon-icon_player"></i>
<span>播放器</span>
</div>
<div class="box-item">
<i class="iconfont icon-Music"></i>
<!-- 使用<br/>让它换行 -->
<br/>
<span>音乐</span>
</div>
<div class="box-item">
<i class="iconfont icon-ic_wechat"></i>
<!-- 使用div块级元素换行 -->
<div>微信</div>
</div>
<div class="box-item">
<i class="iconfont icon-search"></i>
<!-- 使用p块级元素换行 -->
<div>微信</div>
</div>
<div class="box-item">
<!-- 行元素和块级元素穿插 -->
<i class="iconfont icon-icon_xinlang-chunselogo"></i>
<i class="iconfont icon-icon_xinlang-chunselogo"></i>
<p>微博</p>
<i class="iconfont icon-icon_xinlang-chunselogo"></i>
<p>微博</p>
<i class="iconfont icon-icon_xinlang-chunselogo"></i>
</div>
<div class="box-item">
<img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt="">
</div>
<div class="box-item">
<img src="./img/avatar_50x50.jpg" alt="">
<img src="./img/avatar_50x50.jpg" alt="">
<img src="./img/avatar_50x50.jpg" alt="">
</div>
<div class="box-item">
<!-- 让底部对齐 -->
<img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt="">
<img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt="">
<img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt="">
</div>
</div>
<!-- 常规方法让图片水平垂直居中对齐 -->
<div style="width:150px;
height: 150px;
position: relative;
background-color: pink;
border: 1px solid red;
margin-top: 10px;">
<div style="width:50px;height: 50px;
left: 0;right: 0;bottom: 0;top: 0;
position:absolute;margin: auto;">
<img style="margin: auto;width: 100%;height: 100%;object-fit:cover;" src="./img/avatar.jpg" alt="">
</div>
</div>
</body>
</html>
![[个人笔记] Zabbix实现自定义脚本监控Agent端](https://img-blog.csdnimg.cn/ba9a32e68079454889251c63a0169816.png)
