css - DIV 讓數字水平垂直置中？

问题描述

.unsolve{ position: absolute; right: 10px; top:50%; transform: translate(0,-50%); z-index: 1; font-size: 13px; background-color: red; border-radius: 50%; color:#fff; width: 15px; height: 15px; padding: 5px; text-align: center;}

<p class='unsolve'>12</p>

這樣設定的時候，數字都會中間偏下，沒辦法完全中間。請問該怎麼讓他完全水平垂直置中？

问题解答

.unsolve {position: absolute;right: 10px;top:0;bottom: 0;margin:auto;z-index: 1;font-size: 13px;background-color: red;border-radius: 50%;color:#fff;width: 15px;height: 15px;line-height: 15px;padding:5px;text-align: center; }回答2：

不用这么麻烦单行文字 将行高 line-height 和 height 设为相等即可多行文字需要将文字抱在p标签中 外层p display:table 内层p display:table-cell

text-align:center; + line-height:容器元素高度

既然你都设置 height 了，那就直接设置 line-height 吧

**设置一下行高就好了 transform: translate(0,-50%) 这句 可以 删除**

单行的垂直居中 使用line-height 即可。

p中单行文字垂直居中，设置line-height和height两个属性，且两者值相同即可实现。