css垂直水平居中總結

水平居中

內聯元素水平居中

使用text-align能夠實現行內元素的水平居中，不止是行內元素display: inline-block均可以實現元素的居中：

.parent {
  text-align: center;
}
複製代碼

在先前提到text-align能夠讓inline-block的元素居中，那麼若是子元素是塊級元素，咱們能夠設置子元素爲inline-block，父元素使用text-align進行居中，這種也能夠用來實現多個元素的水平居中。inline-block的元素具備block的寬度高度屬性值，同時也具備inline的同行特性，下面是他的代碼：

.parent {
  text-align: center;
}
.child {
  display: inline-block;
  width: xx;
  height: xx;
}
複製代碼

塊級元素水平居中

經過設置元素的margin-left和margin-right都爲auto，就可以讓元素進行水平居中

.parent {
  margin: 0 auto;
}
複製代碼

經過設置定位方式進行水平居中，這裏分爲兩種狀況，一種是知道寬度，另外是不知道寬度，第一種知道寬度的代碼以下：

.parent {
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  left: 50%;
  margin-left: -50px;
}
複製代碼

第二種不知道寬度的狀況：

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
複製代碼

爲何有了第二種還用第一種，由於transform是css3新加的，可能兼容性不太好，須要寫兼容性寫法。

垂直居中

文本元素垂直居中

下面講的這種方法適合子元素爲當行文本的狀況，就是父元素的height等於子元素的line-height;

.parent {
    height: 200px;
  }
  .child {
    line-height: 200px;
  }
複製代碼

圖片進行垂直居中

能夠使用vertical-align對圖片進行垂直居中。這個屬性須要明白他的應用場景，改屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊方式，注意必定是行內元素。

.img1 {
    vertical-align: middle;
  }
  .img2 {
    vertical-algin: middle;
  }
複製代碼

使用定位

同水平居中同樣，均可以使用margin, transform來進行定位。下面講transform的例子，margin的設定方式能夠對比：

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

flex佈局

flex佈局我在flex佈局精講。flex用起來特別爽，上面這些都不是問題，就是須要寫兼容。