zoukankan      html  css  js  c++  java
  • CSS实现垂直水平居中的五种方法

    实例

    固定宽高的垂直水平居中

    上面的例1和例2,是固定宽高的垂直水平居中,例1采用定位结合margin负值。例2巧妙的利用定位结合margin: auto。最后三个例子都是不固定宽高的垂直水平居中,上面五种方法中我个人最喜欢第三种,不仅兼容性好,通用性也好。第五种是利用flex布局,是最简单的

    例3核心代码:

    <div class="p">
      <div class="s"></div>
    </div>
    
    .p {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .s {
     display: inline-block;
    }
    

    例4核心代码:

    .p {
      display: table-cell;
      vertical-align: middle;
    }
    .s {
     display: table;
     margin: 0 auto;
    }
    

    例5核心代码:

    .p {
      display:flex;
    }
    .s {
     margin: auto;
    }
    
    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    mouse_event,keybd_event
    构造自己的StringGrid
    BMP2JPG,JPG2BMP
    $J的用法
    一个简单的系统托盘程序
    构造自己的双向链表
    C++的iostream标准库介绍
    D3DXVec4Dot 函数
    3D游戏从头编之D3D(3)
    D3DXVec4Cross 函数
  • 原文地址:https://www.cnblogs.com/yesyes/p/15356404.html
Copyright © 2011-2022 走看看