• 元素水平垂直居中的方式有哪些


    元素水平垂直居中的方式有哪些?

    • absolute加margin方案

    • fixed 加 margin 方案

    • display:table 方案

    • 行内元素line-height方案

    • flex 弹性布局方案

    • transform 未知元素宽高解决方案

    • 
      
      absolute加margin方案
      
      
          div{
              position: absolute;
               100px;
              height: 100px;
              left: 50%;
              top: 50%:
              margin-top: -50px;
              margin-left: -50px;
          }
      
      
      fixed 加 margin 方案
      
      
          div{
              position: fixed;
               100px;
              height: 100px;
              top: 0;
              right:0;
              left: 0;
              bottom: 0;
              margin: auto;
          }
      
      
      display:table 方案
      
      
          div{
              display: table-cell;
              vertical-align: middle;
              text-align: center;
               100px;
              height: 100px;
          }
      
      
      行内元素line-height方案
      
      
          div{
              text-align: center;
              line-height: 100px;
          }
      
      
      flex 弹性布局方案
      
      
          div{
              display: flex;
              align-items: center;
              justify-content:center
          }
      
      
      transform 未知元素宽高解决方案
      
      
          div{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%)
          }
       
  • 相关阅读:
    关于matplotlib绘制直方图偏移的问题
    XP下 无法定位程序输入点WSAPoll于动态链接库ws2_32.dll 的解决办法
    Ubuntu 拨号上网及校园网开启IPV6
    php性能优化
    Mac OS X 10.11.6 重置root密码
    php 接口类与抽象类的实际作用
    Redis Cluster集群的搭建与实践
    nginx 反向代理 取得真实IP和域名
    mysql主从配置,出错
    mycat水平分片规则
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/12056932.html
Copyright © 2020-2023  润新知