Css 如何在不获取任何滚动条的情况下将引导模式定位在中间？

我试图始终将模式定位在屏幕中央。
为此，我在模式中添加了以下CSS类：

.modal-position {
           position: fixed;
           left: 50% !important;
           top: 50% !important;
           transform: translate(-50%, -50%);
 }

但是它并没有精确居中，在小屏幕上，一个垂直滚动条出现在它的旁边，尽管有足够的空间放置模式

---

JS fiddle也一样：

不需要上面的代码。 默认情况下，引导模式是响应的。

---

如果你想调整宽度只需在css文件中的模式内容类中更改它。

你是否尝试过在打开模式时在css正文/模式中添加

溢出：隐藏

HTML

几乎相同的代码。我已经将一个myModal类添加到modal对话框和CSS中。。

---

希望这有助于解决您在引导弹出模型上应用css的问题。请遵循此链接

https://codepen.io/dimbslmh/full/mKfCc

这实际上是引导的常见问题。请参阅重复问题。@ManjeetThakur（）提供的代码笔中列出了最被接受的答案，这只适用于！重要信息：由于默认情况下modal将overflow-y设置为autonot，所以您需要做的只是确保选择器中有更高的点/优先级，比如尝试使用id而不是类@Dana@ShrutiAgarwal你说剪辑额外数据是什么意思？使其可见将使多余的字符或dom元素在您的计算机上仍然可见dontainer@perseusl：谢谢：）将overflow属性重写为VISIBLE帮助我删除了额外的滚动条，从而将其作为答案。如果不想显示数据，可以使其溢出：hiddenYes它是响应的。但我正在尝试将其放置到中心尝试减小模式内容宽度。在屏幕大小低于768px时，模式仅垂直居中，而不是水平居中。请尝试设置“最大宽度”属性。。更新了上面的代码。在768px之后，它不在中间。在更新属性之后，我可以有一个屏幕截图？。模态对话框类宽度设置为自动低于768px。在768px以上，固定为600px。。。更好的解决方案是使用低于768px的媒体查询来处理宽度。。希望这有帮助。。

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog myModal">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

.myModal
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
  display:table;
  max-width:50%;
}
.myModal .modal-content
{
  display:table-cell;
}