首頁  >  文章  >  web前端  >  寫模態框時怎麼使內容垂直水平居中?

寫模態框時怎麼使內容垂直水平居中?

PHP中文网
PHP中文网原創
2017-06-20 09:45:372669瀏覽

 

  大家好,今天我們來談談在寫模態框的時候怎麼使裡面的內容垂直水平居中,我們先把目光放得簡單一點,

#  這個問題其實就等同於怎麼讓一個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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn