水平居中/垂直居中的方式

水平居中

• 行內元素，給其父元素設定 text-align:center;
• 塊級元素：margin: 0 auto;(在設定with的情況下才有用，因為預設with是100%)
• 利用flex佈局，在父元素中設定：

.father{
  display: flex;
  justify-content: center;
}

• absolute + left + transform

.box{
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
}

• 設定父元素相對定位(position:relative), 子元素設定如下:

.box{
  position: absolute;
  width:固定;
  left: 50%;
  margin-left: -0.5width;

}

垂直居中

• 單行文字, 設定 line-height 等於父元素高度

• 可用 vertical-align 屬性, 而vertical-align只應用於行內元素（影象、文字）和表格元素才會生效。
  對於其他塊級元素, 例如 div、p 等, 預設情況是不支援的. 為了使用vertical-align, 我們需要設定父元素display:table, 子元素 display:table-cell;
  vertical-align:middle;

• absolute + transform

.box{
    position:absolute;
    top:50%;
    transform: translate(0,-50%);
}

• flex佈局,父元素設定如下：

.box{
  display: flex;
  align-items: center;
}

• 設定父元素相對定位(position:relative), 子元素如下css樣式:

.box{
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top:-50px;/*-0.5height*/
}