zoukankan      html  css  js  c++  java
  • 如何实现不定宽高水平垂直居中

    html布局
    <div class="parent"> <div class="child">hello world</div> </div>

    1、使用css3 flex弹性布局

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

    2、使用CSS3 transform,子元素绝对定位

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

    3、利用table-cell

    .parent{
        display: table;
        height:300px;
         300px;
    }
    .parent .child{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    4、使用一个空标签, 设置成 display: inline-block;vertical-align:middle;0

    .parent{
        height:300px;
         300px;
        text-align: center;
        background: #FD0C70;
    }
    .parent span{
        display: inline-block;
         0;
        height: 100%;
        vertical-align: middle;
        zoom: 1;/*BFC*/
        *display: inline;
    }
    .parent .child{
        display: inline-block;
        color: #fff;
        zoom: 1;/*BFC*/
        *display: inline;
    }
        <div class="parent">
            <span></span>
            <div class="child">hello world-2</div>
        </div>
     

    以上方法在ie9以下都有兼容性问题,根据实际情况使用

  • 相关阅读:
    DVI与DVI-D的区别
    easyui.combotree.search.js
    显示实时日期时间(html+js)
    Jquery 内容简介
    EasyUI 格式化DataGrid列
    EasyUI DataGrid 添加排序
    EasyUI DataGrid 复选框
    EasyUI 自定义DataGrid分页
    EasyUI DataGrid能编辑
    EasyUI 我的第一个窗口
  • 原文地址:https://www.cnblogs.com/xiao-ling-zi/p/10871368.html
Copyright © 2011-2022 走看看