CSS-元素水平、竖直居中

元素居中

元素特性：
A. 块级元素（block元素）
   1) 总在新行上开始。
   2) 高度，行高以及内外边距都可控。
   3) 占满父级，宽度缺省是它的容器的100%，除非设定一个宽度。
   4) 可以容纳其他块元素和内联元素。
B. 内联元素.行内元素（inine-block元素）
   1) 节省空间，和其他行内元素堆叠在一起。
   2) 高度，行高和顶及底边距都不可改变。
   3) 宽度取值，宽度就是它的文字或者图片的宽度，不可改变。
   4) 容纳内联，内联元素只能容纳文本或者其他内联元素。

一. 水平居中

   a) 块级元素
      1）元素有确切的宽高（px, %）
      2）设置：margin: 0 auto;
   b) 固定宽度的块级元素(垂直方向同此)
      1）设置父级为相对定位；
      1）通过绝对定位，元素距离左端50%；
      1）设置margin-left向左偏移元素的一半。
   c) 未知宽度的块级元素(垂直方向同此)(X换Y)
      1）设置父级为相对定位；
      1）通过子级绝对定位，距离左端50%；
      1）设置子级transform:translateX(-50%)。

   a) 行内元素
      1）确保所有子元素为行内元素。
      2）设置其父级 text-align: center;
   b) 多个块级元素的居中
      1）将所有块级子元素转换为行内元素。
      2）设置其父级 text-align: center;

   a) 元素的居中
      1）将父级设置display：flex; justify-content: center;

   a) 弹性布局
      1）flex-direction
         1）row（默认值）——主轴为水平方向，起点在左端；
         2）column——主轴为垂直方向，起点在上沿。
      2）flex-wrap
         1）nowrap（默认值）——不换行，容器宽度不够时，每个项目会被挤压宽度；
         2）wrap——换行，并且第一行在容器最上方。
      3）justify-content
         1）center——居中；
         2）space-between——两端对齐父级边缘，项目之间的间隔都相等。

二. 垂直居中
   a) 元素的垂直居中
      1）将父级设置display：flex; flex-direction; justify-content: center;
   b) 单行行内元素的居中
      1）行高line-height 与 父级高度 height 相等
   c) 元素的居中
      1）将父级设置display：table;
      2）子级设置 display：table-cell; vertical-align: center;

三. 水平垂直居中

   上述方法相互结合即可实现 -_- ! ! !