模态框中水平垂直居的问题

Posted Hero^

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模态框中水平垂直居的问题相关的知识,希望对你有一定的参考价值。

 

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

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

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

  <div id="div1"></div  #div1{
      width: 200px;
  height: 100px;
  background: #54fa45;
  position: absolute;
  left:50%;
  top:50%;
  margin-left:-100px; //设置div1的左边距为宽度的一半
  margin-top:-50px; //设置div1的上边距为高度的一半
  }
  第二种情况下:不知道div1的宽高,就好比设置图片的垂直水平居中:
    <img src="img.png" >
    img{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
     }
    这种情况其实很简单,给图片一个绝对定位,然后上下左右都为0,最后margin:auto;
    第三种情况:利用display:table
      <div id="box">
       <div id="div1">
      <img src="img/map-pin.png" >
      </div>
      </div>
        html,body{
        height: 100%;
        overflow:hidden;
        }
        #box{
        width:100%;
        height:100%;
         background: #dbffd8;
        display:table;
        }
        #div1{
        height:100%;
        width:100%;
        display:table-cell;
        text-align:center;
        vertical-align:middle;
        }
   第四种情况:利用display:
table-cell;
      <div id="box">
       <div id="div1">
       <img src="img/map-pin.png" >
      </div>
    </div>
      
    html,body{
    height: 100%;
    overflow:hidden;
    }
    #box{
    width:100%;
    height:100%;
    background: #dbffd8;
    display:table;
    }
    #div1{
    height:100%;
    width:100%;
    display:table-cell;
    text-align:center;
     vertical-align:middle;
      }
  最后一种就是利用盒子的怪异盒模型了
    <div id="box">
    <img src="img/map-pin.png" >
    </div>
      html,body{
      height: 100%;
      overflow:hidden;
       }
     #box{
      width:100%;
      height:100%;
      display:-webkit-box;
      -webkit-box-align:center;
      -webkit-box-pack:center;
      }
这就是我对元素水平居中的理解,你们学会了吗?
 

以上是关于模态框中水平垂直居的问题的主要内容,如果未能解决你的问题,请参考以下文章

在 SwiftUi 中水平组合和打破垂直滚动视图?

在自定义表格视图单元格问题中水平/垂直约束

Bootstrap

在 tableview 中水平滚动以及正常的垂直滚动

在swiper-slide中水平垂直居中元素flex实现

Sencha Touch - 在面板中水平放置而不是垂直放置的标签