水平垂直居中小結

  咱們在頁面佈局中常常會遇到須要將內容水平/垂直居中的狀況，如今咱們就來梳理一下實現的方法。

1、水平居中

  1.行元素設置其父元素的text-align：center，適用於單行文本水平居中。
  2.塊元素設置其自己的左右margin爲auto便可,適用於設置了必定寬高值的塊元素。
  3.使用flex

2、垂直居中

1. line-height

  使行元素垂直居中，能夠設置行元素的line-height值，適用於單行文本垂直居中。
  若行元素所在的塊級父元素有固定高度，則使行元素的line-height值與其父元素的高度相等；若行元素所在的父元素沒有設置高度，則行元素設置的line-height值就是其父元素的高度。
  若要居中一張圖片，能夠設置圖片的vertical-align：middle; 圖片的父元素設置line-height值。

  2.table-cell

  經過以下設置能夠實現元素的垂直居中。
  #parent {display: table;}//此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
  #child {
    display: table-cell;//此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
    vertical-align: middle;
  }

  3.使用絕對定位和負外邊距

  使用絕對定位實現垂直居中時，元素的margin-top應該等於對應的top值的一半再取負值。
  #parent {position: relative;}
  #child {
    height: 30%;
    width: 50%;
    position: absolute;
    top: 50%;
    margin: -15% 0 0 0;
  }

  4.相等的上下padding值

  #parent {
    padding: 5% 0;
  }
  #child {
    padding: 10% 0;
  }

3、水平垂直居中

  1.絕對定位和負外邊距

  使用絕對定位實現水平垂直居中時，元素的margin-top和margin-left應該等於對應的top和left值的一半再取負值。
  #parent {position: relative;}
  #child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
  }

  2.定位和transform

  transform 屬性向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。2D 轉換方法，經過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數，默認以元素的中心點爲基點，x,y若是爲負就反方向移動。這種方法相似於上一種使用負邊距。
  #parent {position: relative;}
  #child {
    position: fixed;//相對定位或絕對定位都可
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  3.絕對定位和margin:auto

  #parent {position: relative;}
  #child {
    width: 50%;
    height: 30%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

  4.flex佈局
  div{
    display: flex;
    justify-content:center;
    align-items:Center;
  }

  能實現居中效果的方法還有不少，這裏列出來的方法只是一小部分，往後會慢慢補充。

參考文章1：https://www.cnblogs.com/hutuz...
參考文章2：https://blog.csdn.net/liufeif...