zoukankan      html  css  js  c++  java
  • 元素水平居中、垂直居中

    元素水平居中:
    1.行内元素:给父元素设为text-align:center;
    块元素:inline-block+父元素text-align:center

    2.块元素:margin-left、margin-right设为auto

    3.浮动元素:
    父元素:position:relative;
        left:50%;
    子元素:position:relative;
        right:50%;

    4.绝对定位元素
      1.已知宽度:
        position:absolute;
        left:50%;
        margin-left:-(宽度/2);
      2.绝对定位元素,不知宽度
        父元素 {
          position:absolute;
          left:50%;
         }
        子元素 {
          position:relative;
          right:50%;
        }
    5.flex
        父元素 {
          display:flex;
          justify-content:center;
        }


    元素垂直居中
    1.文本:line-height:快元素高度

    2.图片:
        父元素 {
          line-height:数值;
        }
        img {
          vertical-align:middle
        }

    3.   父元素 {
        display:table;
        }
       子元素 {
        display:table-cell;
        vertical-align:middle;
      }

    4.已知高度

      子元素 {
        position:absolute;
        top:50%;
        margin-top:-(高度/2);
      }

    5.不知高度

       子元素 {
        position:absolute;
        top:50%;
        transform:translate(-50%,-50%);
       }

    6.flex
      父元素 {
        display:flex;
        align-items:center;
      }

  • 相关阅读:
    Codeforces 1163E 高斯消元 + dfs
    Codeforces 1159E 拓扑排序
    Codeforces 631E 斜率优化
    Codeforces 1167F 计算贡献
    Codeforces 1167E 尺取法
    Gym 102007I 二分 网络流
    Codeforces 319C DP 斜率优化
    Codeforces 1163D DP + KMP
    Comet OJ
    Vue 的响应式原理中 Object.defineProperty 有什么缺陷?为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty?
  • 原文地址:https://www.cnblogs.com/hitwgs/p/8514198.html
Copyright © 2011-2022 走看看