CSS：在相对父级中居中绝对定位文本

Posted 2023-03-05

【中文标题】CSS：在相对父级中居中绝对定位文本

【英文标题】：CSS : centering absolute positioned text inside relative parent

【发布时间】：2013-08-11 10:36:22

【问题描述】：

如何在流动的相对父级中将绝对定位的文本居中？我正在尝试在父元素上使用text-align:center，但它始终以子元素的左角为中心，而不是元素本身。

http://jsfiddle.net/sucTG/2/

【问题讨论】：

为什么在 .text 类 CSS 中需要 position:absolute; ？我刚刚尝试删除该行并且文本正确居中；

因为块中会有相关元素，我希望文本不影响它们的位置，只显示在它们上面。

要将某些东西放在其他东西之上，您只需要定位，而不是绝对必要。

【参考方案1】：

您现在可以使用 flex 更优雅地实现您想要的。例如：

html：

<div class="container">
  <div class="text">Your text</div>
</div>

CSS：

.container 
  position: relative; 
  width: 400px; /** optional **/
  height: 400px; /** optional **/
  background-color: red; /** optional **/


.text 
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /** Y-axis align **/
  justify-content: center; /** X-axis align **/

【参考方案2】：

更新：我之前输入的内容是错误的

http://jsfiddle.net/brJky/1/

这应该更接近你想要的？

您的文本是相对的，容器内的其他元素是绝对的！

.text 
    color:#fff;
    padding:50px 0;
    display:block;
    position:relative;


.absolute 
    background:#f0f;
    height:25px; width:25px;
    position:absolute;
    top:36px; left:50%;

【参考方案3】：

问题是position:absolute; 修改元素的宽度以适应其内容，而text-align: center; 将文本居中在元素块的宽度内。所以如果你添加了position: absolute;，别忘了增加元素的宽度，否则text-align: center;属性将毫无用处。

解决此问题的最佳方法是在 .text 部分添加 width: 100%; 和 left: 0px;。

http://jsfiddle.net/27van/

【讨论】：

我不是 css 人，但解释很好，我真的很喜欢这个答案，它也帮助我解决了我的问题。