CSS 文字垂直居中问题
问题：在 div 中文字居中问题： 当使用 line-height：100%%; 时，文字没有居中，如下：
html: <div id="header_logo_des"></div>
CSS: #header_logo_des{ ???width: 100%; ???height: 100%; ???font-size: 28px; ???text-align:center; ???line-height: 100%; ?/*设置line-height与父级元素的height相等,不能使用%；*/}
但结果如下：
原因：
line-height 属性设置行间的距离（行高）1. 不能为负值；2. 最好设置为具体像素值，如：line-height: 60px;3. 在大多数浏览器中默认行高大约是 110% 到 120%;
解决办法：
1. 使用像素值:
eg: ?line-height: 60px; ?// 60px， 是当前 div 的高度
2. 使用 %：
eg: line-height: 200%; ?// 调高百分比
3. 不再使用 div 直接写文字，可使用其他内联标签包含文字，eg: <span>
HTML： <span>岁月静好</span>CSS: ?span{ ???font-size: 28px; ???display: block; ?//内联元素--块级化 ???text-align: center; ?//文字水平居中 ???line-height: 200%; ?//文字垂直居中}4. 垂直居中 vertical-align: middle; 常用于图片的垂直居中
注意： vertical-align: middle; ?//不要放在div中，因为<div>、<span>这样的元素是没有valign特性的
5. flex： 水平垂直居中
html: <div id="des"> ?????????<span>岁月静好</span> ?????</div>CSS: #des{ ???width: 100px; ???height: 100px; ???display: flex; ???border: 2px solid #ffcfd3; ???background-color: #bacaee;}#des span{ ???display: flex; ???flex: 1; ???justify-content: center;/*水平轴居中*/ ???align-items: center;/*垂直轴居中*/}css 文字垂直居中问题
原文地址：https://www.cnblogs.com/ostrich-sunshine/p/8205629.html