欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

总结css居中问题的解决办法

程序员文章站 2022-04-11 23:14:37
...

CSS居中遇到的问题总结

水平居中

  • 【行内元素】适用inline,inline-block,inline-table,inline-flex元素

    .center {
      text-align: center;
    }
  • 【块级元素】适用于block level元素

    ①一个块级元素

       .center {
     margin: 0 auto;
       }

    ②多个块级元素

    方法一:将块级元素变为行内块级元素
    
    html部分:
    <main class="inline-block-center">
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </main>
    css部分:
    .inline-block-center {
      text-align: center;
    }
    .inline-block-center p {
      display: inline-block;
      text-align: left;
    }
    
    
    方法二:flex布局
    
    html部分:
    <main class="flex-center">
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </main>
    css部分:
    .flex-center{
        display:flex;
      justify-content:center;
    }

垂直居中

  • 【行内元素】

    ①单个行内元素:

    情况一:当link或文本有包裹元素时,设置相等的上下padding

    .link {
      padding-top: 30px;
      padding-bottom: 30px;
    }

    情况二:当link或文本没有包裹时,设置行高和高度相等

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

    ②多个行内元素:

    方法一:将多个行内元素分别置于table-cell中
    
    html部分:
    <table>
      <tr>
    <td>
      1
    </td>
      </tr>
    </table>
    css部分:
    table td {
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      /* default is vertical-align: middle; */
    }
    
    
    方法二:将父元素设置为display:table,将自身设置为display:table-cell
    
    html部分:
    <p class="center-table">
      <p>1</p>
    </p>
    css部分:
    .center-table {
      display: table;
      height: 250px;
      width: 240px;
    }
    .center-table p {
      display: table-cell;
      vertical-align: middle;
    }
    
    
    方法三:使用felex
    
    html部分:
    <p class="flex-center">
      <p>1</p>
    </p>
    css部分:
    .flex-center{
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 400px;/*父容器必须有固定高度*/
    }
    
    
    方法四:当以上代码均不可用时,可尝试此奇淫巧技
    
    html部分:
    <p class="ghost-center">
      <p>1</p>
    </p>
    css部分:
    .ghost-center {
      position: relative;
    }
    .ghost-center::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
    }
    .ghost-center p {
      display: inline-block;
      vertical-align: middle;
    }
  • 【块级元素】

    ①已知元素高度(绝对定位+负的margin)

    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; /* 为元素高度的一半,没有box-sizing时,为height+padding+border的一半*/
    }

    ②不知元素高度(与上一方法,大同小异)

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

    ③flex布局

    .parent {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

水平垂直均居中

①有固定宽高的元素

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;/* 注意此处为height+padding+的一半*/
}

②没有固定宽高的元素(同之前没有固定宽高元素一样,用transform解决)

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

③使用flexbox布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

以上就是总结css居中问题的解决办法的详细内容,更多请关注其它相关文章!

相关标签: CSS居中