美文网首页
css元素居中(水平、垂直)

css元素居中(水平、垂直)

作者: JamHsiao_aaa4 | 来源:发表于2017-07-08 15:44 被阅读0次

    html+css是前端的基础技能,这个也是纯前端开发人员和后端转前端的开发人员的最大差别。元素居中在不同的业务场景要求下,有不同的适应技术方案。下面,就是一些常见的元素居中方案(纯css,不借助js),希望对你有帮助。

    父元素宽高已知

    单行文本水平垂直居中

      父元素上设置样式:
      text-align: center;
      line-height: 父元素高度;

    子元素为非块级元素水平居中

    父元素:
    text-align: center;

    子元素为非块级元素水平、垂直居中(包含多行文本)

    ie9+

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

    不能用css3

  1. 子元素宽高已知
    .parent{
       position: relative;
    }
    .child{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -子元素宽/2;
      margin-top: -子元素高度/2;
    }
  2. 子元素宽高未知
    子元素宽高未知且需要兼容ie8这种情况比较复杂,下面的方案可以解决,需要我们在子元素和父元素之间再多包一层:
    html:
      <div class="parent">
        <div class="child-wrap">
          <div class="child-content">
            这是子元素<br />
            这是子元素
          </div>
        </div>
      </div>
    css:
        .parent{
            height: 100px;
         }
        .child-wrap{
            line-height: 100px;
        }
        .child-content{
          display: inline-block;
          line-height: normal;
          vertical-align: middle;
        }
  3. 父元素未知宽高

    通过设置padding: 上 右 下 左;一般可以达到我们的需要,最多再加上text-align: center;

    好了,常见的居中场景解决方案就上面这些,如果还有业务场景,上面的方案不能实现的话,可以联系我或者给我留言,谢谢。

    相关文章

      网友评论

          本文标题:css元素居中(水平、垂直)

          本文链接:https://www.haomeiwen.com/subject/ccfjhxtx.html