zoukankan      html  css  js  c++  java
  • 前端笔记(总结几种水平垂直居中的方式)

    基本是网上看来的,前2种用的较多,第三种是有点黑科技的写法

    如果只是水平居中,就可以直接使用margin:0 auto;

    <div class="d1_1">
        <div class="d2_1"></div>
    </div>

    第一种:使用translate

    属于transform的一个方法,将div进行百分比xy轴位移

    .d1_1{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .d2_1{
        width: 100px;
        height: 100px;
        background: blue;
        transform: translate(50%,50%);/*位移*/
    }

    当然,最好使用相对定位加绝对定位先,为了不影响其他元素排列

    第二种:使用弹性布局flex

    大多数用这种方式,设置容器的属性即可,不过要注意浏览器兼容

    .d3{
        width: 200px;
        height: 200px;
        background-color: red;
        display: flex;
        align-items: center;/*垂直居中*/
        justify-content: center;/*水平居中*/
    }
    .d4{
        width: 100px;
        height: 100px;
        background: blue;
    }

    第三种:这种是黑科技,使用vertical-align

    不建议多用也比较麻烦,用到了水平居中、变为行内元素,居中

    .d5{
        width: 200px;
        height: 200px;
        background-color: red;
        text-align: center;
    }
    .d5::after{
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .d6{
        width: 100px;
        height: 100px;
        background-color: blue;
        display: inline-block;
        vertical-align: middle;
    }
  • 相关阅读:
    栈和堆的区别【转】
    C++虚函数表解析(转)
    C++编码规范(转)
    全局变量的声明和定义 以及dll中全局变量的导出
    Sizeof与Strlen的区别与联系.
    利用事件对象实现线程同步
    创建互斥对象同步线程
    MFC GDI笔记 转
    ClientToScreen( )和ScreenToClient( )
    Visual C++线程同步技术剖析
  • 原文地址:https://www.cnblogs.com/wuhairui/p/12778734.html
Copyright © 2011-2022 走看看