Bootstrap 3.3.2所有视口尺寸的中心模态，带或不带垂直滚动条
我得到的印象是Bootstrap 3.3.2模式仍然需要大量的工作。 不仅是令人讨厌的错误Open模式正在向左移动身体内容＃9855 仍然没有解决，请参阅此处修改滚动条检查，停止静态导航class次＃13103 （评论在底部），不，甚至是直播BS上的默认模式网站没有居中，我认为错误＃9855（上面链接）也导致此Modal隐藏了垂直浏览器滚动条＃1081 。
如果您将BS站点检查为代码示例Bootstrap模态可选大小 ，请单击大型或小型模式演示，其中video宽度为“似乎”居中。 虽然不是 。
当调整浏览器的大小以使模态几乎填满视口宽度时，可以清楚地观察到模态倾向于浏览器的左侧，我假设由于Bootstrap搞乱滚动条宽度计算或者通常与滚动条混乱并且它的宽度。
现在有两种选择，要么使用不是来自BS的模态插件（有很多模态插件完全在视口中水平和垂直居中以及响应），或者，不知何故开始将一些工作放入BS模态并解决这些问题。
我仍然试图使用BS默认模态并尝试将其居中（在这种情况下是水平）在所有视口大小上，考虑到是否显示垂直滚动条，具体取决于模态的高度。
从这个漂亮的示例中心百分比宽度/高度元素可以看出，可以使元素居中，甚至在视口中具有百分比值作为宽度和高度。
为了解决我的问题，Chris Coyier展示了这项技术吗，在这里你有一个示例代码， Codepen：百分比大小并且仍然以 BS 3.3.2 为中心工作？
div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 我确信有很多开发人员都有这个完全相同的问题，只需将模态居中放在所有视口大小上，无论是否有垂直滚动条。 Chris的例子适用于垂直滚动条。 那么将.modal对话框包含在一个div中，而Chris的中心技术最终会摆脱这个和随后的错误？
在有或没有显示垂直滚动条的情况下，如何将BS 3.3.2模态置于所有视口大小的中心，具体取决于模态的高度？
说实话，我真的没有对BS模式感到好笑，乍一看它看起来一切都看起来很顺利但是如果你真的开始用它开发那么有很多问题出现并且已经很老了，它有点沮丧我，所以请原谅我这里可能刺耳的语调。 我只是真的想要使用BS，而不是花时间如何解决其他插件似乎完全掌握几行代码的问题。
任何帮助，或技术（包括代码）真正在视口中水平居中模式真的非常感谢，使用CSS或jQuery。 谢谢您的帮助。
我的方法似乎适用于所有视口大小， 无论是否存在垂直滚动条，都是测量BS 3.3.2应用于body.modal-open类的填充（那些17px来自哪里？）一旦模态打开并在模态的两侧应用此填充。
一旦shown.bs.modal事件被触发，我就把它包装在一个函数中，以确保模态已经完成加载。 对于远程内容，您可能必须应用loaded.bs.modal 。
如果body.modal-open没有正确的填充，则填充也会从左侧移除。 在最新版本的Chrome和Firefox中测试过。
$('#myModal').on('shown.bs.modal', function () { // meassure the padding-right given by BS and apply it as padding-left to the modal // like this equal padding on either side of the modal is given regardless of media query var modalPaddingRight = $('#myModal').css('padding-right'); console.log ('modalPaddingRight = ' + modalPaddingRight); // apply the padding value from the right to the left $('#myModal').css('padding-left', modalPaddingRight); console.log ( 'modalPaddingLeft = ' + $('#myModal').css('padding-left') + ' modalPaddingRight = ' + $('#myModal').css('padding-right') ); // apply equal padding on window resize var modalPaddingLeft = function () { var modalPaddingRight = $('#myModal').css('padding-right'); console.log ('modalPaddingRight = ' + modalPaddingRight); $('#myModal').css('padding-left', modalPaddingRight); console.log ( 'modalPaddingLeft = ' + $('#myModal').css('padding-left') + 'modalPaddingRight = ' + $('#myModal').css('padding-right') ); }; $(window).resize(modalPaddingLeft); });
我不是jQuery英雄，所以如果有更优雅的方式来编写这个或另一个更快，更好，更好的方法， 无论 垂直滚动条是否存在都可以使用，请告诉我。
谢谢 ：）
使用css我们可以将Bootstrap模态放在垂直中心。
.modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; vertical-align: middle; margin: -2px; height: 100%; } .modal-dialog { display: inline-block; vertical-align: middle; }
Bootstrap模态响应垂直居中？