如何居中绝对定位的[h4]元素?

时间:2019-04-24 02:32:06

标签: css3 bootstrap-4

我想将绝对定位的[h4]标签居中。从数据库中检索[h4]标题的值,并且每次都有不同的值。

我尝试了以下方法。

h4 {位置:绝对;顶部:20px;左侧:42%;}

当h4标题包含大约15个字符时,它可以工作。但是,如果h4标题的字符数少于或大于18个字符,则此方法不起作用。我的意思是,它仅适用于特定情况。有什么灵活的解决方案吗?

2 个答案:

答案 0 :(得分:1)

尝试使用left: 50%;transform: translate(-50%, -50%);

https://stackoverflow.com/a/25776315/11401246很好地解释了它到底在做什么。

答案 1 :(得分:1)

h4{display: flex; justify-content:center; align-items: center;}

不使用position属性,您可以使用display flex来使元素居中。