zoukankan      html  css  js  c++  java
  • 不定宽高盒子的垂直水平居中的方法

    1、

    .father {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        500px;height: 500px;
    }
    
    .child {
        display: inline-block;
    }

    2、

    .container {
        position: relative;
    }
    .inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    //衍生
    inner{
    margin: auto;position: absolute top: 0; left: 0; bottom: 0; right: 0;}

    3、vh和vw是两个比较偏的单位,是指“viewport的height和width的1%”,比如说50vh就是当前视口(窗口的高度,实验中包含了滚动条)高度的50%。也就是说vw将获得和1%差不多的window宽度。

    .inner {
       position:fixed;
       top: 50vh;
       left: 50vw;
       transform: translate(-50%, -50%); 
    }

      衍生

      

     .inner2 {
       position:fixed;
       top: 0;
       left: 0;
       margin: 50vh 0 0 50vw;
       transform: translate(-50%, -50%); 
    }

    4、

     .father {
            display: flex;
            justfy-content: center;
            align-items: center;
        }
  • 相关阅读:
    js实现冒泡排序
    AngularJS控制器
    AngularJS指令
    AngularJS表达式
    AngularJS基础
    Python小例子(判断质数)
    Python小例子(求和)
    Python笔记
    js小例子(简单模糊匹配输入信息)
    word学习笔记
  • 原文地址:https://www.cnblogs.com/zjz666/p/11388302.html
Copyright © 2011-2022 走看看