盒對齊方式-垂直方向與水平方向

對齊的形式能夠以方向來進行劃分，橫向對齊以及縱向對齊

橫向對齊也就是水平對齊，縱向對齊也就是垂直對齊

其中討論最多的是居中方式，一下主要是從橫向和縱向兩個大方向來總結居中的方式

橫向

行內元素

對於行內元素來講，水平居中很是簡單，直接使用text-align:center

如下是html定義的行內元素

<span>

<a>

<br>

<b>

<strong>

<img>

<sup>

<sub>

<i>

<em>

<del>

<input/>

<textarea>

<select>

塊級元素

• 使用margin

  前提是要給居中的塊級元素設定width，不然無效

  width:100px;
  margin: auto 0;
  複製代碼

• 使用絕對定位與margin

  須要知道居中元素的寬度 ，並且父級元素要設置爲相對定位

  width: 20px;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  複製代碼

• 使用絕對定位和transform

  width: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  複製代碼

• 使用flex佈局

  父元素display:flex

  子元素align-self:center

縱向

行內元素

• 使用line-height 須要知道父元素的高度，並把行內元素的line-height設置成相同的值

  .father {
      height: 500px;
      background-color: antiquewhite;
  }
  .father span {
  	line-height: 500px;
  }
  複製代碼

塊級元素

• 一樣，塊級元素也能夠使用line-height進行垂直居中

• 使用絕對定位，margin

  須要設置元素的高度

  position: absolute;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  複製代碼

• 使用絕對定位，transform

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  複製代碼

• 使用flex佈局

  設置容器爲flex佈局，以下

  height: 100px;
  background: aquamarine;
  display:  flex;
  align-items: center;
  複製代碼