写模态框时怎么使内容垂直水平居中？

 

　　大家好，今天我们来说一下在写模态框的时候怎么使里面的内容垂直水平居中，我们先把目光放得简单一点，

　　这个问题其实就等同于怎么让一个div垂直水平居中，那我们怎么来实现这个问题呢？有5种解决办法。

　　首先，第一种情况，我们知道div1宽高的情况下：

　　<div id="div1"></div　　#div1{

<span style="font-size: 18px">    　　width: 200px;</span><br/><span style="font-size: 18px">    　　height: 100px;</span><br/><span style="font-size: 18px">    　　background: #54fa45;</span><br/><span style="font-size: 18px">    　　position: absolute;</span><br/><span style="font-size: 18px">    　　left:50%;</span><br/><span style="font-size: 18px">    　　top:50%;</span><br/><span style="font-size: 18px">    　　margin-left:-100px;  //设置div1的左边距为宽度的一半</span><br/><span style="font-size: 18px">    　　margin-top:-50px; //设置div1的上边距为高度的一半</span><br/><span style="font-size: 18px">　　}<br/>　　第二种情况下:不知道div1的宽高，就好比设置图片的垂直水平居中：<br/></span>

<span style="font-size: 18px">　　　　img{</span><br/><span style="font-size: 18px">    　　　　position: absolute;</span><br/><span style="font-size: 18px">    　　　　left: 0;</span><br/><span style="font-size: 18px">    　　　　top: 0;</span><br/><span style="font-size: 18px">    　　　　right: 0;</span><br/><span style="font-size: 18px">    　　　　bottom: 0;</span><br/><span style="font-size: 18px">    　　　　margin: auto;</span><br/><span style="font-size: 18px">　　　　　}</span>

<span style="font-size: 18px">　　　　这种情况其实很简单，给图片一个绝对定位，然后上下左右都为0，最后margin:auto;<br/>　　　　第三种情况：利用display：table<br/></span>

<span style="font-size: 18px">　　　　　　　　html,body{</span><br/><span style="font-size: 18px">    　　　　　　　　height: 100%;</span><br/><span style="font-size: 18px">    　　　　　　　　overflow:hidden;</span><br/><span style="font-size: 18px">　　　　　　　　}</span><br/><span style="font-size: 18px">　　　　　　　　#box{</span><br/><span style="font-size: 18px">    　　　　　　　　width:100%;</span><br/><span style="font-size: 18px">    　　　　　　　　height:100%;</span><br/><span style="font-size: 18px">   　　　　　　　　 background: #dbffd8;</span><br/><span style="font-size: 18px">    　　　　　　　　display:table;</span><br/><span style="font-size: 18px">　　　　　　　　}</span><br/><span style="font-size: 18px">　　　　　　　　#div1{</span><br/><span style="font-size: 18px">    　　　　　　　　height:100%;</span><br/><span style="font-size: 18px">    　　　　　　　　width:100%;</span><br/><span style="font-size: 18px">    　　　　　　　　display:table-cell;</span><br/><span style="font-size: 18px">    　　　　　　　　text-align:center;</span><br/><span style="font-size: 18px">    　　　　　　　　vertical-align:middle;</span><br/><span style="font-size: 18px">　　　　　　　　}<br/>　　　第四种情况：利用display：</span><span style="font-size: 18px"><em style="line-height: 1.5">table-cell;<br/></em></span>

<span style="font-size: 18px">　　　　html,body{</span><br/><span style="font-size: 18px">    　　　　height: 100%;</span><br/><span style="font-size: 18px">    　　　　overflow:hidden;</span><br/><span style="font-size: 18px">　　　　}</span><br/><span style="font-size: 18px">　　　　#box{</span><br/><span style="font-size: 18px">    　　　　width:100%;</span><br/><span style="font-size: 18px">    　　　　height:100%;</span><br/><span style="font-size: 18px">    　　　　background: #dbffd8;</span><br/><span style="font-size: 18px">    　　　　display:table;</span><br/><span style="font-size: 18px">　　　　}</span><br/><span style="font-size: 18px">　　　　#div1{</span><br/><span style="font-size: 18px">    　　　　height:100%;</span><br/><span style="font-size: 18px">    　　　　width:100%;</span><br/><span style="font-size: 18px">    　　　<span style="color: #ccffff">　<span style="color: #000000">display:table-cell;</span></span></span><br/><span style="font-size: 18px; color: #000000">    　　　　text-align:center;</span><br/><span style="font-size: 18px; color: #000000">   　　　　 vertical-align:middle;</span><br/><span style="font-size: 18px">　　　　　　}<br/>　　最后一种就是利用盒子的怪异盒模型了<br/></span>

<span style="font-size: 18px">　　　　<div id="box"><br><span style="font-size: 18px">    　　　　<img src="img/map-pin.png" alt=""></span><br><span style="font-size: 18px">　　　　</div><br></span>

<span style="font-size: 18px">　　　　　　html,body{</span><br><span style="font-size: 18px">    　　　　　　height: 100%;</span><br><span style="font-size: 18px">    　　　　　　overflow:hidden;</span><br><span style="font-size: 18px">　　　　　　　}</span><br><span style="font-size: 18px">　　　　　#box{</span><br><span style="font-size: 18px">    　　　　　　width:100%;</span><br><span style="font-size: 18px">    　　　　　　height:100%;</span><br><span style="font-size: 18px">    　　　　　　display:-webkit-box;</span><br><span style="font-size: 18px">    　　　　　　-webkit-box-align:center;</span><br><span style="font-size: 18px">    　　　　　　-webkit-box-pack:center;</span><br><span style="font-size: 18px">　　　　　　}<br>这就是我对元素水平居中的理解，你们学会了吗？</span>

 <br>

以上是写模态框时怎么使内容垂直水平居中？的详细内容。更多信息请关注PHP中文网其他相关文章！