3

水平居中

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

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

    ①一个块级元素

       .center {
     margin: 0 auto;
       }

    ②多个块级元素

    方法一:将块级元素变为行内块级元素
    
    html部分:
    <main class="inline-block-center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </main>
    css部分:
    .inline-block-center {
      text-align: center;
    }
    .inline-block-center div {
      display: inline-block;
      text-align: left;
    }
    
    
    方法二:flex布局
    
    html部分:
    <main class="flex-center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </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部分:
    <div class="center-table">
      <p>1</p>
    </div>
    css部分:
    .center-table {
      display: table;
      height: 250px;
      width: 240px;
    }
    .center-table p {
      display: table-cell;
      vertical-align: middle;
    }
    
    
    方法三:使用felex
    
    html部分:
    <div class="flex-center">
      <p>1</p>
    </div>
    css部分:
    .flex-center{
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 400px;/*父容器必须有固定高度*/
    }
    
    
    方法四:当以上代码均不可用时,可尝试此奇淫巧技
    
    html部分:
    <div class="ghost-center">
      <p>1</p>
    </div>
    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;
}

以上的居中大法,基本可以满足日常需求啦,倘若有所错误,欢迎指正啦~


静书
603 声望55 粉丝

简书