div中的中心文本，里面有div

Question

我有这段代码：

<div style="border:1px solid #afafaf;background-color:#efefef;width:100px;height:14px;">
    <div style="text-align:center;width:50px;height:14px;background-color:green;">
        50%
    </div>
</div>

如果第一个DIV，第二个div可能有0到100像素的宽度（进度条），我如何将50％放在中间

Answer 1

Live Demo

• 我将position: relative添加到您的外部div。
• 我添加了一个新的文本div，它完全位于进度条上。
• 请参阅http://css-tricks.com/absolute-positioning-inside-relative-positioning/

无论您的进度条有width，它都不会影响文本div。

<强> HTML：

<div style="border:1px solid #afafaf;background-color:#efefef;width:100px;height:14px;position:relative">
    <div style="text-align:center;width:50px;height:14px;background-color:green;"></div>
    <div id="text">50%</div>
</div>

<强> CSS：

#text {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center
}

Answer 2

例如，有一个第三个div margin-left:auto;margin-right:auto，它将div放在中间