对齐的形式可以以方向来进行划分，横向对齐以及纵向对齐

横向对齐也就是水平对齐，纵向对齐也就是垂直对齐

其中讨论最多的是居中方式，一下主要是从横向和纵向两个大方向来总结居中的方式

横向

行内元素

对于行内元素来说，水平居中非常简单，直接使用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;