css元素居中（水平、垂直）大全

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
      • 子元素宽高已知

        .parent{
           position: relative;
        }
        .child{
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -子元素宽/2;
          margin-top: -子元素高度/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;
            }
        ```
    

• 父元素未知宽高

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

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