zoukankan      html  css  js  c++  java
  • css实现居中

     

    居中布局

     

    • 水平居中
      • 行内元素text-align: center
      • 块级元素margin: 0 auto
      • absolute + transform
      • flex + justify-content: center
    • 垂直居中
      • line-height: height
      • absolute + transform
      • flex + align-items: center
      • table
    • 水平垂直居中
      • absolute + transform
      • flex + justify-content + align-items

     

     

    两种以上方式实现已知或者未知宽度的垂直水平居中

    1

        .wrapper {

            position: relative;

            width: 300px;

            height: 300px;

            background-color: #00000030;

        }

        .wrapper .box {

            position: absolute;

            top: 50%;

            left: 50%;

            width: 100px;

            height: 100px;

            margin: -50px 0 0 -50px;

            background-color: #000;

        }

     

    2.

      position: relative;

      top: 0;

      100%;

      height: 100%;

      z-index: 2;

      top: 40%;

      left: 50%;

      transform: translate(-50%, -50%);

      

    3

        .wrapper {

            display: flex;

            width: 300px;

            height: 300px;

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: #00000030;

        } 

        .wrapper .box {

            width: 100px;

            /* height: 100px; */        

            height: 100px;

            background-color: #000;

        }

  • 相关阅读:
    memwatch使用简化
    memwatch检测内存泄露
    mtrace检测内存泄露
    2.14 环境变量及参数
    设计模式[索引]
    二叉树遍历
    AppCan 双击返回按钮退出应用
    MySQL语句相关经验总结
    mysql连接失败或出现“Too many connections”错误
    让IE的Button自适应文字宽度兼容
  • 原文地址:https://www.cnblogs.com/magicg/p/12620591.html
Copyright © 2011-2022 走看看