CSS元素居中常用方法

flex佈局水平垂直居中(子元素寬高不確定時)

只需要父級元素設定

   /*flex 佈局*/
   display: flex;
   /*實現垂直居中*/
   align-items: center;
   /*實現水平居中*/
   justify-content: center;
複製程式碼

未知父元素高度

.parentElement {
  position: relative;
  // 方法1  子元素寬高不確定時
  .childElement {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
  }
  
   // 方法2 
  .childElement {
    position: absolute;
    width:100px;
    height:100px;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
  }
  // 方法3
  .childElement {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

複製程式碼

偽元素:before

.parentElement {
  display: block;
  &:before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .childElement {
    display: inline-block;
    vertical-align: middle;
  }
複製程式碼

display:table-cell

.parentElement {
  display: table;
  .childElement {
    display: table-cell;
    vertical-align: middle;
  }
  .grandsonElement {}
}
複製程式碼