Vertically centering Bootstrap modal window

Question

I would like to center my modal on the viewport (middle) I tried to add some css properties

 .modal { position: fixed; top:50%; left:50%; }   

I'm using this example 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);
        }
    })

Solution 1

This does the job : http://jsfiddle.net/sRmLV/1140/

It uses a helper-div and some custom css. No javascript or jQuery required.

HTML (based on Bootstrap's demo-code)

<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

.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;
}

Solution 2

Because gpcola's answer didn't work for me, I edited a bit so its works now. I used "margin-top" instead of transform. Also, i use the "show" instead of "shown" event because after it gave me a very bad jump of positioning (visible when you have bootstrap animations on). Be sure to set the display to "block" before positioning, otherwise $dialog.height() will be 0 and the modal will not be centered completely.

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));

Solution 3

This is what I did for my app. If you take a look at the following classes in the bootstrap.css file .modal-dialog has a default padding of 10px and @media screen and (min-width: 768px) .modal-dialog has a top padding set to 30px. So in my custom css file I set my top padding to be 15% for all screens without specifying a media screen width. Hope this helps.

.modal-dialog {
  padding-top: 15%;
}

Solution 4

Best way I found for all HTML5 browsers:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

Solution 5

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <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>
</div>

// Styles

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

View more solutions

Comments

[haim770]

Try to override .modal.fade.in as well

[John Magnolia]

Try with this: github.com/jschr/bootstrap-modal

[jowan sebastian]

Try this zerosixthree.se/… I use : .modal.fade.in { top: 50%; transform: translateY(-50%); }

[tao]

Added flexbox solution (the translateY(-50%) one makes top of modal inaccessible when modal contents are taller than device height).

[jcaruso]

As of bootstrap 4 modal-dialog-centered was added that this is no longer necessary. Please review that answer below.

[gkalpak]

How exactly does it center the dialog vertically ?

[ChrisR]

Is this even valid CSS?

[Michael Butler]

Could you clarify what the function 'e' is in your answer?

[Joshua]

Works great in most places, but does not work in wrapped html5 applications lower than Android 4.4.

[Denis Chmel]

This one is perfect! Just instead of $(document).height() its correct to use $(window).height() in line 4. Plus I would change the last line to: $('.modal:visible').each(centerModal);

[mina morsali]

this only work for small alret boxes , and not work for larg boxes

[mina morsali]

It work for me perfectly, thank you. when we use this code, we also must set padding top and bottom of modal-dialog to 0px ,to perfect centering.

[Dorian]

My modal was down the page with this

[jetlej]

This breaks if the modal is taller than the height of the window. So I added the following line right before setting the margin-top of the dialog: if(offset < 0) offset = 0; I'm pasting the entire block into an answer case that's not clear!

[jetlej]

I added some further changes to keep the top margin equal to the bottom margin of the modal, in the answer below

[Jānis Gruzis]

Perfect, was missing $(this).css('display', 'block'); all the time and thought why height was 0.

[pcatre]

With this solution, because of the height: 100%; and width: 100%; you can't close the modals by clicking out of the modals. Can you think of a fix for this @Rens de Nobel?

[pcatre]

Hey @jetlej why don't you just edit Arany's answer to include this? You solve a big bug on his code.

[pcatre]

Ok this solution appears to work great (except that it stops me from closing the modals by clicking out of them). But somehow it makes some of my e2e tests with protractor fail (and I can't find the reason why, it does not feel like it is a bug on this). Anyway I'm going back to the javascript answer so I don't lose more time on this. But like I said, this appears to work fine, just warning people doing e2e tests with protractor to watch out.

[RNobel]

@pcatre, thanks for the tip ! I've updated the code with a fix for this. Setting pointer-events:none; on the alignment-classes does the trick. Tested in IE11, Latest Chrome and Firefox and iOS Safari.

[jetlej]

@pcatre - I didn't know I could submit edits! Thanks for pointing that out

[Smith]

it does not allow me to click on tab i put inside the modal. but when i remove css, it then allows me.

[jowan sebastian]

YUP! I use : .modal.fade.in { top: 50%; transform: translateY(-50%); }

[Csaba Toth]

This is the universal answer. I don't know why noone voted for it.

[Csaba Toth]

I went through at least 4 SO entries each with a dozen of proposals. BTW, at the age of HTML5 this should be built in functionality to some framework at least. Instead of juggling.

[Csaba Toth]

Also note: if you say width:100% for the table style, you'll get horizontal centering (in case if the modal is not overflow hidden).

[Rafael Ramos]

Simple solution! Worked for me, tks! :D

[Haimei]

Just modify 50% to 15% and then the dialog will be in the center of the window. .modal-vertical-centered { transform: translate(0, 15%) !important; -ms-transform: translate(0, 15%) !important; /* IE 9 / -webkit-transform: translate(0, 15%) !important; / Safari and Chrome */ }

[Nick Retallack]

Now you can't interact with anything inside the modal. Clicking on it anywhere dismisses it.

[RNobel]

It now works due to the pointer-events: all; in the modal-content class. Thanks for updating @Nick Retallack

[Roger Far]

Doesn't work at all, if the size of the dialog changes the dialog will just move lower!

[Dirbaio]

Won't work well if the dialog changes height once shown, due to page resizing or stuff inside it expands/collapses.

[Scott Simpson]

This prevents me from closing the modal when clicking on the background about the modal.

[snovity]

Great solution, but can be improved. First, instead of using pointer-events that are not supported in older browsers I just added data-dismiss="modal" to .vertical-alignment-helper div (it makes BS to close dialog when it is clicked). Second, for .modal-content media query should be used and horizontal margin should be set to 10px on mobile screens, and auto on big screens.

[RNobel]

Hi snovity, sounds good. Can you provide us with a working example (e.g. on jsfiddle)?

[snovity]

Rens de Nobel, after some testing, idea with data-dismiss="modal" turned out to be not that good :) Problem is that when you click on a dialog itself, it also closes because of event propagation to .vertical-alignment-helper. For it to work js is needed to stop propagation from dialog to its parent elements. So I went back to your solution (the only difference is that .vertical-align-center need no prevent-events, it inherits it from .vertical-alignment-helper) Second part with media queries and margins works as expected.

[Michael G]

Not sure if this has been updated since the comments of users saying it doesn't work, on click of inside modal elements, but this is 100% working for me as of now, using the example in the Fiddle above. Thanks so much for your help and all the comments above.

[VictorB]

The inner function worked perfectly when I tried, but your IIFE (immediately invoked function expression) has a typo. The (jQuery) should be inside the enclosing parens, directly after the closing function brace }

[Dunc]

You could just apply to small modals: .modal-dialog.modal-sm { padding-top:15%; }

[Christophe]

Best answer by far. This creates a scrollbar but you can disable it by making .modal-open .modal { overflow-y: hidden; }

[Nicolas Galler]

I liked this solution, very clean. Not sure about desktop or older versions of Safari but it seems to be fine on iOS 8.

[Jyotirmoy Pan]

The disadvantage of this solution is that if the modals are big and occupy entire screen height specially in mobile scrolling does not work. Any solution for that.

[Manjunath Reddy]

Yes I agree with @NicolasGaller. It works well for me too. I tested in Chrome and Firefox. It works well.

[Craig Harshbarger]

This is a great css only progressive enhancement. No js required and any browser that doesn't support flexbox will get the default bootstrap modal placement.

[Robert McKee]

Close, but it breaks being able to close modals when there is more than one on the page. See my answer below to fix.

[giovannipds]

This flexbox version doesn't work as expected. Testing on the latest Chrome (52.0.x), the .modal-dialog is centered properly but its content interaction seems frozen on the old place (weirdly). However, you can try to use this technique right on .modal-dialog (not on .modal), and with some other properties, it does seem to work. =)

[bernie]

Does not work on IE 11. body.modal-open .modal .modal-dialog needs to have an explicit height for vertical alignment to work properly. Adding height: 100px works but limits the usefulness of this solution.

[bernie]

Update: Adding align-items: center; to body.modal-open .modal seems to work.

[AlexioVay]

Great, thank you. It's actually the only thing that worked 2016.

[RNobel]

Mobile scrolling works fine on the devices I have here...@JyotirmoyPan, what device are you using?

[user2061057]

This works otherwise well, but the closing animation doesn't look good.

[Jeff Bluemel]

works perfectly, thank you. I eliminated a div put vertical-alignment-helper in <div class="modal fade vertical-alignment-helper" role=dialog>.

[RNobel]

yw :) For the sake of readability, I like to keep those divs separate

[ESR]

This is the true "how to center something" with CSS without using Flex. The fact that the context is Bootstrap or a modal should be irrelevant. All other answers are way too overkill.

[Radmation]

Best solution IMO.

[tao]

With this method, if the modal is taller than device screen height, the top of the modal becomes inaccessible.

[Greg Blass]

Should be able to accomplish an animation with CSS3 transitions?

[jcaruso]

As of bootstrap 4 modal-dialog-centered was added that this is no longer necessary. Please review that answer below.

[broc.seib]

This is the best answer for bootstrap 4.

[Vahid]

by adding both modal-dialog and modal-dialog-centered has better result

[jcaruso]

@v.d thats understood given the documentation say "Add .modal-dialog-centered to .modal-dialog to vertically center the modal." I'll update my answer to reflect that as well for those who didn't catch that.

[Hassan Nomani]

4 years have passed. Still useful. Thanks mate!

[Tim Bogdanov]

This is probably the best solution for Bootstrap 3 users