zoukankan      html  css  js  c++  java
  • css多种方法实现已知宽度和未知宽度的元素水平垂直居中

    // html
    
    <div class="box-wrapper">
        <div class="box">
            内部box
            <p>更多内容</p>
        </div>
    </div>

    //css
    .box-wrapper{
         100%;
    height: 300px; border: 1px solid #f00;
    .box{
    background-color: #0f0;
    }
    }

    1、已知box宽高

    .box-wrapper{
        position: relative;
    .box{ position: absolute; top:
    50%; left: 50%;
    200px;
    height: 100px; margin
    -top: -50px; margin-left: -100px; } }

    2、未知box宽高

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

    3、未知box宽高

    .box-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    4、未知box宽高, 内容垂直居中

    .box-wrapper {
      display: table-cell;
    vertical-align: middle;
    400px;
    text-align: center;
    .box{
    display: inline-block;
    }
    }

     

  • 相关阅读:
    设计模式
    刷新所有视图存储过程
    js杨辉三角控制台输出
    2018申请淘宝客AppKey
    w3c标准 dom对象 事件冒泡和事件捕获
    promise原理
    vue virtual Dom
    css学习
    seo优化
    新概念学习
  • 原文地址:https://www.cnblogs.com/xuepei/p/9990047.html
Copyright © 2011-2022 走看看