• CSS居中方案


    1.行内元素或者内联元素

    1.垂直居中

    设置行高和高度一致,如果没必要设置高度的话,可以直接利用line-height垂直性,直接设置需要的高度为line-height的高度亦可居中

      .center-single-text {
        height: 100px;
        line-height: 100px;
      }
    

    利用内联元素的vertical-align基线参考这一行的其他元素内联元素基线,设置一个伪元素来指定其基线为航中间,设置伪元素高度为100%,然后inline-block,vertical-align: middle
    接着设置需要被垂直居中的元素 vertical-align: middle

      .ghost-center:before {
        content: " ";
        display: inline-block;
        height: 100%;
        vertical-algin: middle;
      }
      .ghost-center center-element {
        display: inline-block;
        vertical-align: middle;
      }
    

    2.水平居中

    /* 在父级元素设置 */
    .center-chlidren {
      text-align: center;
    }
    

    2.块级元素

    1.垂直居中
    利用绝对定位将元素左上角移至父元素中心,然后将元素中心移至父元素中心即可。

    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%); 
    }
    

    2.水平居中

    /* 在居中元素设置 */
    .center-me {
      margin: 0 auto;
    }
    

    居中神器 flex

    无需区分元素类型,一致地行为完成居中,需要注意兼容性

    .parent {
      display: flex;
      /* 水平居中 */
      justify-content: center; 
      /* 垂直居中 */
      align-items: center;
    }  
    
  • 相关阅读:
    iframe透明
    c#创建可以为空类型
    div仿框架布局
    IBatis.Net学习笔记(六):Castle.DynamicProxy的使用
    很好玩的谷歌纵横
    TFS签入签出规范
    ibatis学习笔记
    iBATIS.net调用存储过程
    最新28个很棒的 jQuery 教程
    IBatis.Net 中的数据类型转换
  • 原文地址:https://www.cnblogs.com/sefaultment/p/10349124.html
Copyright © 2020-2023  润新知