twitter-bootstrap 如何将 Bootstrap Modal 置于水平中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37950121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Can I Put Bootstrap Modal in Horizontally center?
提问by Mohsen Zahedi
I have a modal that I resize it.I want large width size of modal and horizontally centered. In addition when I resize it to smaller it's correct.
我有一个调整它大小的模态。我想要大宽度的模态并水平居中。此外，当我将其调整为更小时，它是正确的。
<style>
#PopupModel {width:60%;}
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/*/To center vertically*/
display: table-cell;
vertical-align: middle;
}
.modal-content {
/*Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it*/
width:inherit;
height:inherit;
/*To center horizontally*/
}
</style><div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
<div class="modal-dialog" role="document" >
<div class="modal-content" >
<div class="modal-header">
<h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>
</div>
<div class="modal-body" id="modelResult">
<br />
</div>
</div><!-- /.modal-content -->
<div class="modal-footer">
<div class="">
<button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
<button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
</div>
</div>
</div><!-- /.modal-dialog -->
</div>I test some ways but not worked for me .any help ?
我测试了一些方法但对我不起作用。有什么帮助吗？
回答by Justin Go
your current code in jsfiddle would help out a lot but can you try:
.modal {
width: 600px; //size of modal
margin: 0 auto;
}
您当前在 jsfiddle 中的代码会很有帮助，但您可以尝试：
.modal {
width: 600px; //size of modal
margin: 0 auto;
}
option 2:
选项2：
if you've no issues using flexbox, refer to the answer on this one Flexbox: center horizontally and vertically
回答by ariebear
This may be a tad late, but the simplest way of aligning the modal in the center of your screen is to use the vertical-align: middle; property inherent to inline elements.
这可能有点晚了，但是在屏幕中央对齐模式的最简单方法是使用 vertical-align: middle; 内联元素固有的属性。
Please remove all extra formatting you have added to the basic Bootstrap modal and add the following CSS:
请删除您添加到基本 Bootstrap 模式的所有额外格式并添加以下 CSS：
.modal {
text-align: center;
}
.modal::before {
content: "";
display: inline-block;
height: 100%;
margin-right: -4px;
vertical-align: middle;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Please keep in mind that I am using Bootstrap 3 and the above CSS may or may not work with a Bootstrap 4 modal.
请记住，我使用的是 Bootstrap 3，上面的 CSS 可能适用于 Bootstrap 4 模态，也可能不适用。
Original solution: http://www.learnsourcecode.com/blogs/align-bootstrap-modal-center-of-screen-vertically
原解决方案：http: //www.learnsourcecode.com/blogs/align-bootstrap-modal-center-of-screen-vertically
回答by Dan S
I had this issue with .modal-lg and .modal-xl in Bootstrap 4.2.1. I simply added:
我在 Bootstrap 4.2.1 中遇到了 .modal-lg 和 .modal-xl 的问题。我简单地补充道：
.modal.modal-lg, .modal.modal-xl { max-width: unset !important; right: 0; }
For some reason this worked perfectly, though buyer beware, I haven't had a chance yet to test this extensively. If anyone sees or has a problem with this, I'd like to know.
出于某种原因，这非常有效，尽管买家要小心，但我还没有机会对其进行广泛的测试。如果有人看到或对此有疑问，我想知道。
回答by Richard Hamilton
Simply use text-align: center
只需使用 text-align: center
.modal-header, .modal-footer {
text-align: center;
}
<style>
#PopupModel {width:60%;}
.modal {
}
.modal-header, .modal-footer {
text-align: center;
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/*/To center vertically*/
display: table-cell;
vertical-align: middle;
}
.modal-content {
/*Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it*/
width:inherit;
height:inherit;
/*To center horizontally*/
}
</style><div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
<div class="modal-dialog" role="document" >
<div class="modal-content" >
<div class="modal-header">
<h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>
</div>
<div class="modal-body" id="modelResult">
<br />
</div>
</div><!-- /.modal-content -->
<div class="modal-footer">
<div class="">
<button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
<button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
</div>
</div>
</div><!-- /.modal-dialog -->
</div>回答by Pankaj Shinde
This works for me.
这对我有用。
Adjust top and left values to make model at center as per your needs.
根据您的需要调整顶部和左侧的值以在中心制作模型。
.modal {
position: fixed;
top: 15%;
left: -20%;
}
References: https://gist.github.com/emerico/9127830fe2496c44c116fe600f9097bf
参考资料：https: //gist.github.com/emerico/9127830fe2496c44c116fe600f9097bf
