web元素水平垂直居中实现方案总结

水平居中：

• 对于行内元素：text-align:center；

• 对于确定宽度的块级元素：
  1.width加margin实现，width固定宽度，margin: 0 auto;
  2.绝对定位和margin-left:width/2，前提是父元素position:relative;

• 对于宽度未知的块级元素：
  1.table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设置为display:table;）
  再给该标签加magin:0 auto;
  2.inline-block实现水平居中方式：display:inline-block和text-algin:center;实现水平居中。
  3.绝对定位+transform,translateX可以移动元素50%。
  4.H5堆出的布局方式：flex布局（justify-content:center;）。

垂直居中：

1. 设置line-height等于元素高度实现居中。
2. 设置父元素相对定位，子元素绝对定位加子元素margin:auto 0;实现。
3. 弹性布局flex：父级元素display:flex;子级元素margin:auto 0;实现。
4. 设置父元素相对定位，子元素绝对定位加子元素位移transform实现。
5. table布局，父级元素通过转换成表格形式，然后设置子级元素vertical-align:middle;实现。（注意：vertical-align:middle使用前提条件是内联元素以及display值为table-cell元素）