javascript - 垂直居中的Bootstrap模态窗口(Vertically centering Bootstrap modal window)

Question

I would like to center my modal on the viewport (middle) I tried to add some css properties(我想将我的模态放在视口（中间）上，我试图添加一些css属性)

.modal { position: fixed; top:50%; left:50%; } I'm using this example http://jsfiddle.net/rniemeyer/Wjjnd/(我正在使用这个例子http://jsfiddle.net/rniemeyer/Wjjnd/) I tried(我试过了) $("#MyModal").modal('show').css( { 'margin-top': function () { return -($(this).height() / 2); }, 'margin-left': function () { return -($(this).width() / 2); } })   ask by user2613813 translate from so

Answer 1

This does the job : http://jsfiddle.net/sRmLV/1140/(这样做的工作： http ： //jsfiddle.net/sRmLV/1140/)

It uses a helper-div and some custom css.(它使用helper-div和一些自定义css。) No javascript or jQuery required.(不需要javascript或jQuery。) HTML (based on Bootstrap's demo-code )(HTML （基于Bootstrap的演示代码 ）) <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body">...</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> CSS(CSS) .vertical-alignment-helper { display:table; height: 100%; width: 100%; pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */ } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; pointer-events:none; } .modal-content { /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */ width:inherit; max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */ height:inherit; /* To center horizontally */ margin: 0 auto; pointer-events: all; }