块级元素、行内元素的水平、垂直居中方法总结

行内元素

div {
    /*div内的行内元素水平居中*/
    text-align: center;

    /*div内的行内元素垂直居中（即line-height设置为与height相同，若不设置height则默认等于line-height，故也可只设置line-height）*/
    height: 50px;
    line-height: 50px;
}

// 盒子flex布局也可

块级元素

1. 水平居中

  /*方案1 水平流动性*/
  div {
    width: 100px;
    margin: 0 auto;
  }

  /*方案2 负边距，absolute类似*/
  div {
    width: 100px;
    position: relative;
    margin-left: -50px; // 不要认为可以用padding代替哦，padding不能为负 :)
    left: 50%;
  }
  div {
    width: 100px;
    position: relative;
    margin-left: 50%;
    left: -50px;
  }
  div {
    width: 100px;
    position: relative;
    padding-left: 50%;
    left: -50px;
  }

  div {
    width: 100px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
  }


  /*方案2 absolute元素两边定位之后具备了流动性*/
  div {
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /*方案3 flex*/
  div {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

2. 垂直居中（注意margin、padding是相对于父级元素的width）

  /*方案1 负边距，absolute类似*/
  div {
    height: 100px;
    position: relative;
    margin-top: -50px; // 不要认为可以用padding代替哦，padding不能为负 :)
    top: 50%;
  }
  div {
    height: 100px;
    position: relative;
    margin-top: 50px;
    top: -50px;
  }
  div {
    height: 100px;
    position: relative;
    padding-top: 50px;
    top: -50px;
  }

  div {
    height: 100px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  /*方案2 absolute元素两边定位之后具备了流动性*/
  div {
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
  }

  /*方案3 flex*/
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

 

欢迎关注、点赞