Bootstrap modal frame vertically centered

A long time did not write things, before want to write some mobile side of things to fill it, mobile development or pretty fast, back to the point.

Because recently in a system, the system refers to the bootstrap, found that the modal frame is not centered vertically, and then searched for a bit, but also tried, nothing is done on the JS modification, and are not perfect, such as dynamic Zone detection document height and the height of the modal box itself, Then assign the modal box Margin-top value.

This does not ultrathin, but the need to do more judgment, such as--1, modal box is too high, over the screen, 2, browser window scaling, modal box position change problem.

Let's get Started ↓

-------Start--------

Insert a "level two" div layer within the modal box

1 <Divclass= "Modal Fade"ID= "Mymodal"TabIndex= "-1"role= "Dialog"Data-backdrop= "Static"Aria-labelledby= "Mymodallabel">2     <Div><!--the newly inserted div wrapping layer -3       <Divclass= "Modal-dialog"role= "Document">4         <Divclass= "Modal-content">5           <Divclass= "Modal-header">6             <Buttontype= "button"class= "Close"Data-dismiss= "Modal"Aria-label= "Close"><spanAria-hidden= "true">&times;</span></Button>7             <h4class= "Modal-title"ID= "Mymodallabel">Title</h4>8           </Div>9           <Divclass= "Modal-body">Ten               <!--Main content - One           </Div> A           <Divclass= "Modal-footer"> -             <Buttontype= "button"class= "Btn Btn-green">Are you sure</Button> -             <Buttontype= "button"class= "Btn Btn-gray"Data-dismiss= "Modal">Cancel</Button> the           </Div> -         </Div> -       </Div> -     </Div> + </Div>

The Back button does not care, is my custom class, here only added a DIV layer does not do class or ID tag, this can be customized.

Then, add the following code in the Bootstrap.css, the main points used here are display:table; and Display:table-cell;

I tried a lot of layout, so far, this best use, in fact, there is a way to display:inline-block, but that way needs to rely on a little JS, after all, line-height and height of the 100% is not a concept, not up to the full-screen effect, Can only rely on a little JS, if someone has a better solution, do not need to add div code can be done is the best-I think.

1 . Modal>div{/*Append this line*/2 Display:Table;3 width:100%;4 Height:100%;5}6 7 . Modal-dialog{8   /*omit to show the original content, only append content is shown here*/9 Display:Table-cell;Ten vertical-align:Middle; One} A  - . Modal-content{ -   /*omit to show the original content, only append content is shown here*/ the Display:Block; - width:500px; - margin:0 Auto; -}

Here I define the. modal-content width 500 and margin center, while removing the following here the width and margin center, of course, this is a free definition, can not do so, but also to achieve the effect.

At this point, the modal frame can be centered, and the position can be adjusted as the size of the browser window.

--------End--------

Although I saw the unsemantic of the grid, despised a period of time bootstrap grid redundancy, but this time also have to admire Bootstrap in the modal box will mask fixed smart, modal box center and upper and lower positions are based on CSS to complete, Make the style and structure as separate as possible.

With this idea, we bootstrap modal frame vertical center, preferably also with the way of pure CSS, can not only guarantee the "purity" of bootstrap, but also make the modal frame can be "adaptive" to show, to the left and right margin:0 auto;

By the way, and then spit out the world standard, now the page has been more than confined to the past of the kind of "printed" layout, get a block vertical center incredibly still have to make so much trouble, so many animation than engage in this practical.

Bootstrap modal frame vertically centered