CSS 在 twitter-bootstrap 中居中模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18257200/
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
Centering modal in twitter-bootstrap
提问by user2462794
I can't center my modal in twitter-bootstrap with various sizes. You can see live example hereand here. (just click on the picture or "Report this image"). You'll see that modal is there working like charm, but it isn't horizontally centered. I tried everything: margins, float, text-align and even <center>
我无法在各种大小的 twitter-bootstrap 中居中我的模态。您可以在此处和此处查看现场示例。（只需点击图片或“举报此图片”）。你会看到模态在那里像魅力一样工作，但它不是水平居中。我尝试了一切：边距、浮动、文本对齐甚至<center>
.modal:
.modal：
.modal {
position: fixed;
top: 10%;
z-index: 1050;
width: auto;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal-body:
.modal-body：
.modal-body {
margin: 0 auto 0 auto;
position: relative;
padding: 15px;
overflow-y: auto;
}
回答by alex89x
I know it's a little late, but I found the solution to all the problem with centering the Bootstrap Modal with different heights than the standard's (one).
我知道这有点晚了，但我找到了解决所有问题的解决方案，即以与标准（一个）不同的高度居中 Bootstrap Modal。
$("#yourModal").modal('show').css({
'margin-top': function () { //vertical centering
return -($(this).height() / 2);
},
'margin-left': function () { //Horizontal centering
return -($(this).width() / 2);
}
});
回答by Ty_
A solution that works regardless of the child element size (in this case the modal). Can also be used to center vertically.
无论子元素大小（在本例中为模态）都有效的解决方案。也可用于垂直居中。
.centered {
left: 50%;
transform: translateX(-50%);
}
Essentially what we are doing here is pushing the element right by half of the parent container's width. In the case of the modal the parent would (should) be the body. The transform property is the pulling the element left by half of its ownwidth.
本质上，我们在这里所做的是将元素推到父容器宽度的一半。在模态的情况下，父母将（应该）是身体。transform 属性是将元素向左拉动其自身宽度的一半。
Edit: To center vertically
编辑：垂直居中
.centered {
top: 50%;
transform: translateY(-50%);
}
Note: I think the horizontal centering only works if the height/width of the parent are the same, as the % comes from the parent width. If they are not the same then just use the parent height.
注意：我认为水平居中只有在父级的高度/宽度相同时才有效，因为 % 来自父级宽度。如果它们不相同，则只需使用父高度。
回答by Coop
It's not the modal body that needs centering, it's the overall modal. Since that has fixed positioning, you could do it with CSS and jQuery (since jQuery is already being used):
需要居中的不是模态体，而是整体模态。因为它有固定的定位，你可以用 CSS 和 jQuery 来做（因为 jQuery 已经被使用了）：
CSS:
CSS：
.modal { left: 50%; }
jQuery:
jQuery：
$('.modal').each(function(){
var modalWidth = $(this).width(),
modalMargin = '-' + (modalWidth/2) + 'px!important';
$(this).css('margin-left',modalMargin);
});
Alternatively it is possible with just CSS:
或者，也可以仅使用 CSS：
.modal {
width: 100%;
left: 0;
background-color: transparent; }
.modal-body {
display: inline-block;
background-color: #FFF; }
.modal img { min-width: none!important; }
回答by Kami
Alternative to @Coop's answer. As you have a fixed width text area there, you can set the width of the modal and use negative margins rather than jquery.
替代@Coop 的答案。由于您在那里有一个固定宽度的文本区域，您可以设置模态的宽度并使用负边距而不是 jquery。
.modal {
left:50%;
width:444px;
margin-left:-222px;
}
In your current code, there is nothing that will allow the modal to center.
在您当前的代码中，没有任何东西可以让模态居中。
回答by xzegga
You can use jquery to reproduce this behaivor:
您可以使用 jquery 重现此行为：
left: 50%;
width: 560px;
margin-left: -280px;
Calculating the width of the div and asign css
计算div的宽度并指定css
$(document).ready(function () {
var modalWidth = $('#myModal').width();
$('#myModal').css("left", "50%");
$('#myModal').css("width", modalWidth);
$('#myModal').css("margin", (modalWidth/2)*-1);
});
回答by Hardik Sondagar
.modal-dialog
{
padding-top: 15%;
}
