bootstrap是个前端懒人神器，样式舒服，布局顺畅，但是自带的modal模态框默认是水平居中，但是垂直位置偏页面上方。如果想要实现水平并且垂直居中的效果，需要自己写个css样式重新定义一下位置。官方给的例子中模态框的默认id是myModal，默认带有固定定位(position:fixed;)的样式。
咱们只需在自己的css中重写一下这个样式即可:
#myModal{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
经过重新定义后会发现在移动端模态框的宽度太小了，我们还可以继续优化一下，设置一个最小宽度，最终代码如下：
#myModal{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
min-width:80%;/*这个比例可以自己按需调节*/
}
其他需要的样式可以继续自由发挥。
最新更新：文章发表后有朋友留言反映，按照上述方法实现模态框居中后偶尔会出现滚动条(如上图所示)，我测试了一下，在浏览器高度较小的时候的确会有这个问题。不过不用担心，将上述写法完善一下就行了，完善后的写法如下：
#myModal{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
min-width:80%;/*这个比例可以自己按需调节*/
overflow: visible;
bottom: inherit;
right: inherit;
}
