CSS，HTML，使 div 文本保持在其 div 中间，无论文本如何 [重复]答案

【问题标题】：CSS, HTML, Make div text remain on middle of its div regardless of text [duplicate]CSS，HTML，使 div 文本保持在其 div 中间，无论文本如何 [重复]
【发布时间】：2017-05-29 00:37:29
【问题描述】：

我在div标签内的网页中间有一个文本，实际上它还没有在中间，但我默认需要它在中间。那里有一个按钮，当你点击时，中间的文字会改变。问题是，当我更改文本时，它不再居中。我想要的是，无论其文本内容如何，文本都应始终位于中心。

$("#myButton").on('click', function() {
  $('#throbber_status_info').html('TEXXXXXXXXXXXXXT');
});

#throbber_status_info {
  position: absolute;
  color: black;
  top: 53%;
  left: 50%;
  margin: 0px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">
  click me
</button>
<div id="throbber_status_info" style="">Text</div>

【问题讨论】：

你真的需要绝对定位吗？
是的，我需要绝对定位
@Reymark 请务必查看链接的重复项 - 接受的答案概述了将绝对定位的可变宽度元素居中所需的确切 CSS 样式。
知道了@Serlite，下次我会检查它。谢谢

标签： javascript jquery html css

【解决方案1】：

您需要使用text-align: center 属性，它会自动为您执行此操作，请参阅更新后的 sn-p：

$("#myButton").on('click', function() {
  $('#throbber_status_info').html('TEXXXXXXXXXXXXXT');
});

#throbber_status_info {
  position:absolute;
  color:black;
  top:53%;
  width: 100%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">
  click me
</button>
<div id="throbber_status_info" style="">Text</div>

【讨论】：

目的也是使文本垂直居中。
@KCarnaille 你可以使用vertical-align:middle; 属性，它会成功
它只适用于表格布局或显示：内联块属性。这里的目的是使绝对 div 水平/垂直居中！
谢谢，但我需要在这里保留“top:53%”属性
@Reymark 我更新了代码以保留您的要求 :)

【解决方案2】：

你可以使用display:flex;

https://jsfiddle.net/wnqd85qr/1/

使用 Flexbox，您可以轻松地垂直居中和水平居中。但是你的 CSS 代码需要一个高度，否则它就不起作用了。

您可以在此处了解有关 flexbox 的更多信息： http://flexboxfroggy.com/

【讨论】：

谢谢你，:)，这是一个很大的帮助

【解决方案3】：

我不想让div 绝对定位，但如果你需要这样，那么试试这个：

#throbber_status_info {
  color: black;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #dadada;
  margin: 0px auto;
  top: 53%;
  text-align: center;
}

这是一个Fiddle 来查看它的实际应用。

【讨论】：

谢谢，这就是我要找的:)

【解决方案4】：

如果您想使用 jQuery 动态更改 left 属性，您可以编写代码：

$("#myButton").on('click', function() {
  $('#throbber_status_info').html('TEXXXXXXXXXXXXXT').css('left', function() {
    var tw = $(this).width();
    var w = $(this.parentNode).width();
    return (50 - (tw / 2 / w * 100)) + '%';
  });
});

当然，这不是您拥有的唯一选择，而且这种方法没有响应性，即 left 属性应在调整大小事件时更新。

https://jsfiddle.net/Lommba8s/

【讨论】：

【解决方案5】：

使用 Jquery，您可以创建一个函数来使文本居中。

$("#myButton").on('click',function(){
    $('#throbber_status_info').html('TEXXXXXXXXXXXXXT');
  centerMe('#throbber_status_info');

});
function centerMe(JQ_Selector){
    var medItemWidth = $(JQ_Selector).width()/2;
  var medWindWidth = $(window).width()/2;
  $(JQ_Selector).css('left', (medWindWidth - medItemWidth) + 'px');
}

在此处查看 JSFiddle。 https://jsfiddle.net/99s400nw

【讨论】：

您不应该使用 JavaScript 居中元素。它的工作速度会明显变慢。更重要的是，每次窗口大小发生变化时，您都需要重新计算适当的位置！