如何将一个div居中，哪个位置是绝对的？答案

【问题标题】：How to center a div which position is absolute?如何将一个div居中，哪个位置是绝对的？
【发布时间】：2014-05-21 04:56:07
【问题描述】：

我有以下代码：

HTML：

<div class="label">Middle</div>
<div id='sliderdiv'>
    <input type="range" value="50" min="0" max="100" />
</div>

CSS：

 .label {
     position: absolute;
     margin-top: 13px;
     margin-left: auto;
     margin-right: auto;
     z-index: 3;
 }
 input.ui-slider-input {
     display: none !important;
 }
 #sliderdiv .ui-slider-track {
     margin-left: 15px;
 }

但我的文本 div 无法居中，是否有解决此问题的方法或者 css 无法解决？

我当然可以使用 javascript 动态计算它，但我想避免这种情况。

这是给你的实时代码：http://jsfiddle.net/VmwQM/

编辑：

这不是我想要的：

.label {
         position: absolute;
         margin-top: 13px;
         margin-left: 50%;
         z-index: 3;
     }

因为我希望我的文本中间是 50%，而不是我的文本从 50% 开始。

【问题讨论】：

How do I horizontally center an absolute positioned element inside a 100% width div?的可能重复
不是真的，因为我的文字大小不同。我有多个文本 div。这个解决方案会让我的文本从 50% 开始，但我希望我的文本中间是 50%。
@Thunder: 你希望哪个 div 居中。
在这种情况下，Center text in an absolute position div可能重复

标签： javascript jquery html css

【解决方案1】：

你可以试试这个：

Fiddle here

.label {
 position:absolute;
 top:11px;
 width:100%;
 z-index: 3;
 text-align:center;
}
input.ui-slider-input {
 display: none !important;
}
#sliderdiv .ui-slider-track {
 margin-left: 15px;
}

祝你好运..

【讨论】：

抱歉，我需要滑块内的文字。
@PradeepPansari 你能解释一下你在这里做了什么吗？这样其他人就可以接受这个答案并将其应用于略有不同但相似的问题。

【解决方案2】：

你想要这样的东西吗：

 body {
     text-align: center;
 }
 .label {
   width: 100%;
 }

您的文字将在滑块内：

EXAMPLE

【讨论】：

+1，很好很简单。对 OP：只要确保您可以将 HTML 包装在一个单独的“容器”中以使文本居中，这样您的整个网站就不会将其文本居中。
谢谢！另一种选择是将text-align: center 添加到label，因为在这种情况下他有width: 100%。

【解决方案3】：

margin: 0 auto 不适用于绝对定位元素。只需将left 或right 属性设置为50%：

.label {
  position: absolute;
  margin-top: 13px;
  left: 50%;
  z-index: 3;
}

并且不要忘记绝对定位是相对于父级计算的。除了该示例之外，您可能还有其他标记会影响 position: absolute 在应用于 .label 时的作用

【讨论】：

忽略这个，Pradeep的回答更准确。

【解决方案4】：

使用：

  left: 50%;
  margin-left: -25px;

Working Fiddle

【讨论】：

【解决方案5】：

您不能使用绝对定位的 margin:auto 居中元素。它们的显示属性自动设置为inline。

Why margin:auto doesn't work?

jQuery-解决方案可以是：

var left = $(window).width() / 2 - $('.label').width() / 2;
$('.label').css('left',left+'px');

【讨论】：

【解决方案6】：

HTML

<div class="slide-holder">
    <div id='sliderdiv'>
        <input type="range" value="50" min="0" max="100" />
    </div>
</div>

CSS

.slide-holder {
    text-align: center;
}
#sliderdiv {
    display: inline-block;
}

【讨论】：

【解决方案7】：

如果你给出一个宽度值，你可以将它居中：

.label {
    position: absolute;
    margin: 13px auto auto;
    width: 3rem;
    right: 0; left: 0;
}

有关仅使用 css in this smashing magazine article 居中绝对元素的更多信息

【讨论】：