Javascript 将DIV定位为绝对时居中，DIV中的内容会发生变化

我有一个网站，我有一个垂直和水平居中的网站上的div。它的当前内容是25，因此定心工作水平。如果我更改内容，我必须将

宽度

编辑为它的宽度，将

左边的边距

编辑为宽度的一半。随着内容的变化，每次你进入网站，这将不会工作，我需要一个解决方案

我怎样才能修好它？我可以检测文本的宽度并用js或jQuery设置

宽度

&

左边距

#output {
    position: absolute;

    top: 50%;
    margin-top: -160px;

    color: #6FA673;
    font: 200pt Aleo;
    font-weight: bold;
    left: 50%;

    width: 296px;
    margin-left: -148px;
}

谢谢大家!

编辑： 这是给你们的JSFIDLE！与数字25完美配合，但其他任何东西都会有点偏离垂直方向

---

如果您唯一关心的是左边的边距需要是contanier宽度的1/2，您可以使用以下选项：

$('#output').css('marginLeft', '-'+$('#output').width() /2+'px');

当然

width: auto;

你说

如果我更改了内容，我必须将宽度编辑为它的宽度和宽度 页边空白为宽度的一半

…不，你不必那么做。你只需要一个更好的CSS解决方案。另一种方法是，无论文本内容有多长或短，只要将内容置于中心即可。这样你就不用担心写js代码来检测它的css属性了

CSS：

   #output {
        position: relative;
        top: 50%;
        margin:0 auto;

        text-align:center;
        color: #6FA673;
        font: 200pt Arial;
        font-weight: bold;
    }

还有我的

更新 您可以使用简单的jquery方法在页面加载时垂直对齐元素

JS：

var mtop = $(window).height()/2;
$('#output').css({top: mtop});   

---

我刚刚看到了你的JSFIDLE，同时我用HTML/CSS编造了一些东西，试图弄清楚你在寻找什么（对我来说，simlar to lightbox:）

从你的口袋里 这个

---

虽然没有那么流畅

你能用你的HTML和CSS制作一个jsfiddle.net或codepen.io吗：）@GCyrillus添加了一个jsfiddle，谢谢你的快速响应！我在这个问题上可能解释得不太清楚。我需要检测文本的宽度，然后设置宽度和左边距值。谢谢你的代码，当我检测到宽度时会很有用。位置设置为“相对”时，div不会垂直居中，谢谢你的回答。这不是最短的解决方案，但它做了应该做的事情。谢谢！：）

#output, html, body {

    height:100%;

    width:100%;

    margin:0;

    display:table;

}

body {

    display:table-cell;

    vertical-align:middle;

    text-align:center;

}

#output {

    position: absolute;

    color: #6FA673;

    font: 200pt Arial;

    font-weight: bold;

    line-height:0

}