zoukankan      html  css  js  c++  java
  • 模态框中水平垂直居的问题

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

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

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

      <div id="div1"></div  #div1{
           200px;
      height: 100px;
      background: #54fa45;
      position: absolute;
      left:50%;
      top:50%;
      margin-left:-100px; //设置div1的左边距为宽度的一半
      margin-top:-50px; //设置div1的上边距为高度的一半
      }
      第二种情况下:不知道div1的宽高,就好比设置图片的垂直水平居中:
        <img src="img.png" alt="">
        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" alt="">
          </div>
          </div>
            html,body{
            height: 100%;
            overflow:hidden;
            }
            #box{
            100%;
            height:100%;
             background: #dbffd8;
            display:table;
            }
            #div1{
            height:100%;
            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" alt="">
          </div>
        </div>
          
        html,body{
        height: 100%;
        overflow:hidden;
        }
        #box{
        100%;
        height:100%;
        background: #dbffd8;
        display:table;
        }
        #div1{
        height:100%;
        100%;
        display:table-cell;
        text-align:center;
         vertical-align:middle;
          }
      最后一种就是利用盒子的怪异盒模型了
        <div id="box">
        <img src="img/map-pin.png" alt="">
        </div>
          html,body{
          height: 100%;
          overflow:hidden;
           }
         #box{
          100%;
          height:100%;
          display:-webkit-box;
          -webkit-box-align:center;
          -webkit-box-pack:center;
          }
    这就是我对元素水平居中的理解,你们学会了吗?
     
  • 相关阅读:
    我的书单
    写一个小demo过程中遇到的各种问题 学生管理考勤系统(网页模拟)
    高程三 面向对象程序设计
    JavaScript 函数与对象的 简单区别
    高程三 基本包装类型部分的学习
    巨简单巨丑的计算器(写的我快自闭了)
    checked选择器实现tab切换
    JavaScript进行简单的随即验证码生成(适合和我一样刚入门一本完整的教材书都没看完的弟弟)
    dom编程艺术章12
    vue插件开发与发布
  • 原文地址:https://www.cnblogs.com/DongZixin/p/7050385.html
Copyright © 2011-2022 走看看