水平垂直居中随笔

水平居中的方式：

• 若子元素宽度固定，用magin-auto，
  缺点：只作用于块级元素，且需知道子元素宽度。

• 父元素设置text-align，子元素设置inline-block（利用内联块也能够居中的特性)
  缺点：多个内联会挤一起

• 父元素相对定位，子元素绝对定位，再加上left:50%和margin-left:-50%减去自身宽度的一半

• flex布局
  父元素设置
  { display: flex;
  justify-content: center;
  flex-direction: row;
  }

垂直居中的方式：

• 已知子元素宽高
  设置position和top，left，再设置负margin减去自身高宽的一半

• 不知子元素宽高
  和已知子元素宽高实现基本一致，区别在于用transform：translate(-50%,-50%)实现减去自身高宽的一半

• flex布局
  父元素设置
  { display: flex;
  justify-content: center;
  align-items: center;
  }