zoukankan      html  css  js  c++  java
  • 未知盒子宽高使盒子垂直水平居中

    ???注意:未知盒子宽高并不是盒子没有宽高,是不知道盒子宽高的具体值是多少。

    垂直水平居中方法(transform:translate)

    让我垂直水平居中

    .parent{
    position: relative;
    100px;
    height: 100px;
    border: 1px solid #ccc;
    }

    .child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #ddd;
    }

     

    垂直水平居中方法(弹性布局)

    让我垂直水平居中

    .parent1{
    display: flex;
    justify-content: center;
    align-items:center;
    200px;
    height: 100px;
    border: 1px solid #ccc;
    }

    .child1{
    background: #ddd;
    100px;
    height: 50px;
    }

     

    垂直水平居中方法(网格布局)

    让我垂直水平居中

    .parent2{
    display: grid;
    /* 在行中对齐方式 */
    justify-items:center;
    /* 在列中的对齐方式 */
    align-items:center;
    200px;
    height: 100px;
    border: 1px solid #ccc;
    }

    .child2{ 100px;
    height: 50px;
    background: #ddd;
    }

     

    垂直水平居中方法(定位)

    让我垂直水平居中

    .parent3{ 300px;
    height: 100px;
    position: relative;
    border: 1px solid #ccc;
    }

    .child3{
    100px;
    height: 50px;
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: #ddd;
    }

  • 相关阅读:
    Time
    算法与结构
    11
    DateUtils
    Ext.container.Container
    Ext.Component
    extjs布局--只看现象
    Ext下的方法
    充血模式与贫血模式
    ext下的组建,mvc,mvvm
  • 原文地址:https://www.cnblogs.com/linxim/p/11921504.html
Copyright © 2011-2022 走看看