Bootstrap 3 modal vertical position center

Question

This is a two part question    How can you position the modal vertically in the center when you don t know the exact height of the modal  Is it possible to have the modal centered and have overflow auto in the modal-body  but only if the modal exceeds the screen height    I have tried using this    modal-dialog     height  80   important    padding-top 10       modal-content     height  100   important    overflow visible      modal-body     height  80     overflow  auto      This gives me the result I need when the content is much larger than vertical screen size  but for small modal contents it s pretty much unusable

User · Accepted Answer

I came up with a pure css solution  It s css3 though  which means ie8 or lower is not supported  but other than this it s tested and working on ios  android  ie9   chrome  firefox  desktop safari    I am using the following css    modal-dialog     position absolute    top 50   important    transform  translate 0  -50    important    -ms-transform  translate 0  -50    important    -webkit-transform  translate 0  -50    important    margin auto 5     width 90     height 80      modal-content     min-height 100     position absolute    top 0    bottom 0    left 0    right 0      modal-body     position absolute    top 45px      height of header       bottom 45px       height of footer       left 0    right 0    overflow-y auto     modal-footer     position absolute    bottom 0    left 0    right 0      Here is a fiddle  http   codepen io anon pen Hiskj    selecting this as the correct answer since there s no extra heavy javascript that brings the browser to its knees in case of more than one modals

User · Answer

My solution   modal-dialog-center       margin-top  25           lt div id  waitForm  class  modal  gt           lt div class  modal-dialog modal-dialog-center  gt               lt div class  modal-content  gt                   lt div class  modal-header  gt                       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt                       lt h4 id  headerBlock  class  modal-title  gt  lt  h4 gt                   lt  div gt                   lt div class  modal-body  gt                       lt span id  bodyBlock  gt  lt  span gt                       lt br  gt                       lt p style  text-align  center  gt                           lt img src   Url Content    Content images progress-loader gif    alt  progress   gt                       lt  p gt                      lt  div gt               lt  div gt           lt  div gt       lt  div gt

User · Answer

yet another solution which will set a valid position for each visible modal on window resize event and on show bs modal    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  lt  bottomMargin  offset   bottomMargin           dialog css  margin-top   offset                document  on  show bs modal     modal   centerModal         window  on  resize   function                  modal visible   each centerModal               jQuery

User · Answer

It can simply can be fixed with display  flex   modal-dialog     margin-top  0    margin-bottom  0    height  100vh    display  flex    flex-direction  column    justify-content  center      modal fade  modal-dialog     transform  translate 0  -100        modal in  modal-dialog     transform  translate 0  0       With prefix   modal-dialog     margin-top  0    margin-bottom  0    height  100vh    display  -webkit-box    display  -webkit-flex    display  -ms-flexbox    display  flex    -webkit-box-orient  vertical    -webkit-box-direction  normal    -webkit-flex-direction  column        -ms-flex-direction  column            flex-direction  column    -webkit-box-pack  center    -webkit-justify-content  center        -ms-flex-pack  center            justify-content  center      modal fade  modal-dialog     -webkit-transform  translate 0  -100              transform  translate 0  -100       modal in  modal-dialog     -webkit-transform  translate 0  0             transform  translate 0  0

User · Answer

i have downloaded bootstrap3-dialog from bellow link and modified the open function in  bootstrap-dialog js   https   github com nakupanda bootstrap3-dialog   Code  open  function                   this isRealized    amp  amp  this realize                this updateClosable                  Custom To Vertically centering Bootstrap              var  mymodal   this getModal                 mymodal    mymodal append   lt table border  0  cellpadding  0  cellspacing  0  width  100   height  100   gt  lt tr gt  lt td align  center  valign  middle  class  centerModal  gt  lt  td gt  lt  tr gt  lt  table gt                  mymodal    mymodal find   modal-dialog   appendTo  mymodal find   centerModal                   END             this getModal   modal  show                return this              Css   centerModal  modal-header      text-align left     centerModal  modal-body      text-align left

User · Answer

All what I did in my case is to set the Top in my css knowing the height of the modal    lt div id  myModal  class  modal fade  gt       lt  div gt   in my css i set   myModal      height  400px      top  calc 50  - 200px   important

User · Answer

If you re okay with using flexbox then this should help solve it    modal-dialog     height  100     width  100     display  flex    align-items  center      modal-content     margin  0 auto

User · Answer

There is an easiest way to do this using css    modal-dialog       position  absolute      left  0      right  0      top  0      bottom  0      margin  auto      width 500px      height 300px      That s it  Notice that it is only needed to be applied to the  modal-dialog container div   Demo  https   jsfiddle net darioferrer 0ueu4dmy

User · Answer

Consider using the bootstrap-modal plugin found here - https   github com jschr bootstrap-modal  The plugin will center all of your modals

User · Answer

Found the perfect solution from here    function         function reposition             var modal     this               dialog   modal find   modal-dialog            modal css  display    block                Dividing by two centers the modal exactly  but dividing by three             or four works better for larger screens          dialog css  margin-top   Math max 0     window  height   - dialog height      2                 Reposition when a modal is shown         modal   on  show bs modal   reposition          Reposition when the window is resized       window  on  resize   function                 modal visible   each reposition

User · Answer

In mobile plantform it might look a little different  here s my code    lt div class  modal-container  gt     lt style gt     modal-dialog      margin-top  60       width 80       margin-left  10       margin-right  10       margin-bottom  100         media screen and  orientation landscape        modal-dialog        margin-top  70        width 80         margin-left  10         margin-right  10         margin-bottom  100               modal-body      text-align  center         modal-body p      margin 14px 0px      font-size  110          modal-content      border-radius  10px         modal-footer      padding 0px         modal-footer a      padding  15px         modal-footer a nth-child 1       border-radius  0px 0px 0px 10px         modal-footer a nth-child 2       border-radius  0px 0px 10px 0px         lt  style gt     lt h2 gt Basic Modal Example lt  h2 gt     lt div data-toggle  modal  data-target   myModal  gt Div for modal lt  div gt       lt div class  modal fade  id  myModal  role  dialog  gt         lt div class  modal-dialog  gt           lt div class  modal-content  gt             lt div class  modal-body  gt               lt p gt             lt  p gt             lt  div gt             lt div class  modal-footer  gt               lt div class  btn-group btn-group-justified  gt                 lt a href     class  btn btn-default  data-dismiss  modal  gt    lt  a gt                 lt a href     class  btn btn-default  data-dismiss  modal  gt    lt  a gt               lt  div gt             lt  div gt           lt  div gt         lt  div gt       lt  div gt   lt  div gt

User · Answer

var modalVerticalCenterClass     modal   function centerModals  element        var  modals      if   element length             modals    element        else            modals     modalVerticalCenterClass     visible               modals each  function i            var  clone     this  clone   css  display    block   appendTo  body            var top   Math round   clone height   -  clone find   modal-content   height      2           top   top  gt  0   top   0           clone remove              this  find   modal-content   css  margin-top   top               modalVerticalCenterClass  on  show bs modal   function e        centerModals   this          window  on  resize   centerModals

User · Answer

modal     text-align  center      media screen and  min-width  768px        modal before       display  inline-block      vertical-align  middle      content           height  100           modal-dialog     display  inline-block    text-align  left    vertical-align  middle      And adjust a little bit  fade class to make sure it appears out of the top border of window  instead of center

User · Answer

it s not that complicated   please try this     document  ready function        var modalId     myModal       resize  function                var new margin   Math ceil    window  height   -   modalId  find   modal-dialog   height      2                 modalId  find   modal-dialog   css  margin-top   new margin    px                window  resize function            resize                  modalId  on  shown bs modal   function            resize

User · Answer

Use this simple script that centers the modals   If you want you can set a custom class  ex   modal modal-vcenter instead of  modal  to limit the functionality only to some modals   var modalVerticalCenterClass     modal    function centerModals  element        var  modals      if   element length         modals    element        else        modals     modalVerticalCenterClass     visible       modals each  function i        var  clone     this  clone   css  display    block   appendTo  body        var top   Math round   clone height   -  clone find   modal-content   height      2       top   top  gt  0   top   0       clone remove          this  find   modal-content   css  margin-top   top               modalVerticalCenterClass  on  show bs modal   function e        centerModals   this          window  on  resize   centerModals     Also add this CSS fix for the modal s horizontal spacing  we show the scroll on the modals  the body scrolls is hidden automatically by Bootstrap      scroll fixes     modal-open  modal       padding-left  0px  important      padding-right  0px  important      overflow-y  scroll

User · Answer

Expanding on  Finik s excellent answer  this fix is only applied to non-mobile devices  I tested in IE8  Chrome  and Firefox 22 - it works with very long or short content    modal     text-align  center     media screen and  min-device-width  768px       modal before       display  inline-block      vertical-align  middle      content           height  100           modal-dialog     display  inline-block    text-align  left    vertical-align  middle

User · Answer

This is responsive code and also open with different size in mobile view please check once    modal     text-align  center    padding  0 important      modal before     content        display  inline-block    height  20     vertical-align  middle    margin-right  -4px      modal-dialog     display  inline-block    text-align  left    vertical-align  middle

User · Answer

A simple way  Work for me  Thks rensdenobel    http   jsfiddle net rensdenobel sRmLV 13    lt style gt   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        margin  0 auto     lt  style gt   lt  -- Button trigger modal -- gt   lt button class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal  gt Launch demo modal lt  button gt   lt  -- Modal -- gt   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  vertical-alignment-helper  gt           lt div class  modal-dialog vertical-align-center  gt               lt div class  modal-content  gt                   lt div class  modal-header  gt                       lt button type  button  class  close  data-dismiss  modal  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt span class  sr-only  gt Close lt  span gt                        lt  button gt                        lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt                    lt  div gt                   lt div class  modal-body  gt     lt  div gt                   lt div class  modal-footer  gt                       lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt                       lt button type  button  class  btn btn-primary  gt Save changes lt  button gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

The simplest solution is to add modal dialog styles to the top of the page or import css with this code    lt style gt       modal-dialog       position absolute      top 50   important      transform  translate 0  -50    important      -ms-transform  translate 0  -50    important      -webkit-transform  translate 0  -50    important      margin auto 50       width 40       height 40          lt  style gt    Modal declaration        lt div class  modal fade  id  exampleModalCenter  tabindex  -1  role  dialog  aria-labelledby  exampleModalCenterTitle  aria-hidden  true  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt h5 class  modal-title  id  exampleModalLongTitle  gt Modal title lt  h5 gt                   lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt                       lt span aria-hidden  true  gt  amp times  lt  span gt                   lt  button gt               lt  div gt               lt div class  modal-body  gt                                   lt  div gt               lt div class  modal-footer  gt                   lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Close lt  button gt                   lt button type  button  class  btn btn-primary  gt Save changes lt  button gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Modal usage    lt a data-toggle  modal  data-target   exampleModalCenter  gt        lt  a gt

User · Answer

1  How can you position the modal vertically in the center when you don t know the exact height of the modal   To absolute center the Bootstrap 3 Modal without declaring a height  you will first need to overwrite the Bootstrap CSS by adding this to your style sheet    modal-dialog-center      Edited classname 10 03 2014        margin  0      position  absolute      top  50       left  50       This will position the modal-dialogs top-left corner in the center of the window   We have to add this media query or else the modal margin-left is wrong on small devices    media  max-width  767px       modal-dialog-center      Edited classname 10 03 2014        width  100            Now we will need to adjust its position with JavaScript  To do that we give the element a negative top and left margin equal to half of its height and width  In this example we will be using jQuery since it is available with Bootstrap       modal   on  shown bs modal   function           this  find   modal-dialog   css            margin-top   function                  return -   this  outerHeight     2                       margin-left   function                  return -   this  outerWidth     2                             Update  01 10 2015    Adding on Finik s answer  Credits to Centering in the Unknown    modal     text-align  center    padding  0 important      modal before     content        display  inline-block    height  100     vertical-align  middle    margin-right  -4px     Adjusts for spacing        modal-dialog     display  inline-block    text-align  left    vertical-align  middle      Notice the negative margin-right  This removes the space added by inline-block  That space causes the modal to jump to the bottom of the page  media width  lt  768px   2  Is it possible to have the modal centered and have overflow auto in the modal-body  but only if the modal exceeds the screen height    This is possible by giving the modal-body an overflow-y auto and a max-height  This takes a bit more work to get it working properly  Start with adding this to your style sheet    modal-body       overflow-y  auto     modal-footer       margin-top  0      We will use jQuery again to get the window height and set the max-height of the modal-content first  Then we have to set the max-height of the modal-body  by subtracting the modal-content with the modal-header and modal-footer       modal   on  shown bs modal   function         var contentHeight     window  height   - 60      var headerHeight     this  find   modal-header   outerHeight      2      var footerHeight     this  find   modal-footer   outerHeight      2         this  find   modal-content   css            max-height   function                  return contentHeight                           this  find   modal-body   css            max-height   function                  return  contentHeight -  headerHeight   footerHeight                             this  find   modal-dialog   css            margin-top   function                  return -   this  outerHeight     2                       margin-left   function                  return -   this  outerWidth     2                           You can find a working demo here with Bootstrap 3 0 3  http   cdpn io GwvrJ EDIT  I recommend using the updated version instead for a more responsive solution  http   cdpn io mKfCc  Update  30 11 2015    function setModalMaxHeight element      this  element         element       this  content       this  element find   modal-content      var borderWidth     this  content outerHeight   - this  content innerHeight      var dialogMargin      window  width    lt  768   20   60    var contentHeight     window  height   -  dialogMargin   borderWidth     var headerHeight    this  element find   modal-header   outerHeight      0    var footerHeight    this  element find   modal-footer   outerHeight      0    var maxHeight       contentHeight -  headerHeight   footerHeight      this  content css          overflow    hidden           this  element      find   modal-body   css          max-height   maxHeight         overflow-y    auto               modal   on  show bs modal   function         this  show      setModalMaxHeight this          window  resize function       if      modal in   length    0        setModalMaxHeight     modal in                Updated 30 11 2015 http   cdpn io mKfCc with above edit

User · Answer

set modal center to screen   modal     text-align  center    padding  0 important     modal before     content        display  inline-block    height  100     vertical-align  middle    margin-right  -4px     modal-dialog     display  inline-block    text-align  left    vertical-align  middle

User · Answer

x000D   x000D   modal   x000D    x000D   vertical-alignment-helper   x000D      display table  x000D      height  100   x000D      width  100   x000D    x000D   vertical-align-center   x000D         To center vertically    x000D      display  table-cell  x000D      vertical-align  middle  x000D    x000D   modal-content   x000D         Bootstrap sets the size of the modal in the modal-dialog class  we need to inherit it    x000D      width inherit  x000D      height inherit  x000D         To center horizontally    x000D      margin  0 auto  x000D    x000D   lt head gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt script src  http   maxcdn bootstrapcdn com bootstrap 3 2 0 js bootstrap min js  gt  lt  script gt  x000D   lt link href  http   maxcdn bootstrapcdn com bootstrap 3 2 0 css bootstrap min css  rel  stylesheet   gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   lt  -- Button trigger modal -- gt  x000D   lt button class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal  gt Launch demo modal lt  button gt  x000D   lt  -- Modal -- gt  x000D   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt  x000D       lt div class  vertical-alignment-helper  gt  x000D           lt div class  modal-dialog vertical-align-center  gt  x000D               lt div class  modal-content  gt  x000D                   lt div class  modal-header  gt  x000D                       lt button type  button  class  close  data-dismiss  modal  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt span class  sr-only  gt Close lt  span gt  x000D   x000D                       lt  button gt  x000D                        lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt  x000D   x000D                   lt  div gt  x000D                   lt div class  modal-body  gt     lt  div gt  x000D                   lt div class  modal-footer  gt  x000D                       lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D                       lt button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D                   lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    CSS    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        margin  0 auto      HTML    lt  -- Button trigger modal -- gt   lt button class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal  gt Launch demo modal lt  button gt   lt  -- Modal -- gt   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  vertical-alignment-helper  gt           lt div class  modal-dialog vertical-align-center  gt               lt div class  modal-content  gt                   lt div class  modal-header  gt                       lt button type  button  class  close  data-dismiss  modal  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt span class  sr-only  gt Close lt  span gt                        lt  button gt                        lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt                    lt  div gt                   lt div class  modal-body  gt     lt  div gt                   lt div class  modal-footer  gt                       lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt                       lt button type  button  class  btn btn-primary  gt Save changes lt  button gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Reference  http   jsfiddle net rensdenobel sRmLV 13

User · Answer

Adding this simple css also works    modal-dialog     height  100vh  important    display  flex      modal-content     margin  auto  important    height  fit-content  important

User · Answer

My solution    modal in  modal-dialog        -webkit-transform  translate 0  calc 50vh - 50         -ms-transform  translate 0  50vh  translate 0  -50        -o-transform  translate 0  calc 50vh - 50         transform  translate 0  50vh  translate 0  -50

User · Answer

I know it s a bit late  but I am adding a new answer so that it doesn t get lost in the crowd  It s a cross-desktop-mobile-browser solution that works everywhere properly as it should   It just needs the modal-dialog to be wrapped inside a modal-dialog-wrap class and need to have the following code additions    modal-dialog-wrap     display  table    table-layout  fixed    width  100     height  100       modal-dialog     display  table-cell    vertical-align  middle    text-align  center      modal-content     display  inline-block    text-align  left      The dialog starts centered and in cases of large content it simply grows vertically until a scrollbar appears   Here is a working fiddle for your pleasure   https   jsfiddle net v6u82mvu 1

User · Answer

myModal   on  shown bs modal   function         var initModalHeight       modal-dialog   outerHeight      give an id to  mobile-dialog     var userScreenHeight     document  outerHeight        if  initModalHeight  gt  userScreenHeight                modal-dialog   css  overflow    auto      set to overflow if no fit       else               modal-dialog   css  margin-top             userScreenHeight   2  -  initModalHeight 2      center it if it does fit

User · Answer

For the centering  I don t get what s with the overly complicated solutions  bootstrap already centers it horizontally for you  so you don t need to mess with this  My solution is just set a top margin only using jQuery       myModal   on  loaded bs modal   function           this  find   modal-dialog   css            margin-top   function                  return     window  outerHeight     2  -    this  outerHeight     2                            I ve used the loaded bs modal event as I am remotely loading content  and using the shown ba modal event causes the height calculation to be incorrect  You can of course add in an event for the window being resized if you need it to be that responsive

User · Answer

The most universal solution I wrote  Dynamicaly computes with dialog height   Next step could be recalculating of dialogs  height on window resize    JSfiddle  http   jsfiddle net 8Fvg9 3      initialise on document ready jQuery document  ready function            use strict           CENTERED MODALS        phase one - store every dialog s height         modal   each function              var t     this               d   t find   modal-dialog                fadeClass    t is   fade      fade                    render dialog         t removeClass  fade                addClass  invisible                css  display    block               read and store dialog height         d data  height   d height                hide dialog again         t css  display                    removeClass  invisible                addClass fadeClass                  phase two - set margin-top on every dialog show         modal   on  show bs modal   function              var t     this               d   t find   modal-dialog                dh   d data  height                w     window  width                h     window  height               if it is desktop  amp  dialog is lower than viewport             set your own values          if  w  gt  380  amp  amp   dh   60   lt  h                d css  margin-top   Math round 0 96    h - dh    2              else               d css  margin-top

User · Answer

You might want to check out this collection of methods for absolute centering a div  http   codepen io shshaw full gEiDt

User · Answer

Try something like this    popup  overlay       position  fixed      left   0      top   0      width  100       height  100       z-index  999      text-align  center        popup       display  inline-block      vertical-align  middle

User · Answer

This works for me    modal     text-align  center    padding  0 important      modal before     content        display  inline-block    height  100     vertical-align  middle    margin-right  -4px      modal-dialog     display  inline-block    text-align  left    vertical-align  middle

User · Answer

This is quite old and specifically asks for a solution using Bootstrap 3  but for anyone wondering  from Bootstrap 4 on there is a built-in solution called  modal-dialog-centered  Here s the issue  https   github com twbs bootstrap issues 23638 So using v4 you just need to add  modal-dialog-centered to  modal-dialog to vertically center the modal   lt  -- Button trigger modal -- gt   lt button type  quot button quot  class  quot btn btn-primary quot  data-toggle  quot modal quot  data-target  quot  exampleModalCenter quot  gt    Launch demo modal  lt  button gt    lt  -- Modal -- gt   lt div class  quot modal fade quot  id  quot exampleModalCenter quot  tabindex  quot -1 quot  role  quot dialog quot  aria-labelledby  quot exampleModalCenterTitle quot  aria-hidden  quot true quot  gt     lt div class  quot modal-dialog modal-dialog-centered quot  role  quot document quot  gt       lt div class  quot modal-content quot  gt         lt div class  quot modal-header quot  gt           lt h5 class  quot modal-title quot  id  quot exampleModalCenterTitle quot  gt Modal title lt  h5 gt           lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  aria-label  quot Close quot  gt             lt span aria-hidden  quot true quot  gt  amp times  lt  span gt           lt  button gt         lt  div gt         lt div class  quot modal-body quot  gt                     lt  div gt         lt div class  quot modal-footer quot  gt           lt button type  quot button quot  class  quot btn btn-secondary quot  data-dismiss  quot modal quot  gt Close lt  button gt           lt button type  quot button quot  class  quot btn btn-primary quot  gt Save changes lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt   Demo

User · Answer

Here s one other css only method that works pretty well and is based on this  http   zerosixthree se vertical-align-anything-with-just-3-lines-of-css   sass    modal       height  100         modal-dialog           top  50   important          margin-top 0          margin-bottom 0               keep proper transitions on fade in      amp  fade  modal-dialog           transform  translateY -100    important             amp  in  modal-dialog           transform  translateY -50    important

User · Answer

Very very easy way to achieve this concept and you will get modal always in the moddle of your screen by css as fllow   http   jsfiddle net jy0zc2jc 1   you have to just modal class display as table by following css   display table   and modal-dialog as display table-cell  see full working example in given fiddle

[css] Bootstrap 3 modal vertical position center

Examples related to css

Examples related to twitter-bootstrap

Examples related to center

[css] Bootstrap 3 modal vertical position center

Examples related to css

Examples related to twitter-bootstrap

Examples related to modal-dialog

Examples related to center