对CSS元素居中问题的探讨研究

内联元素

对于内联元素，水平居中只需要在其父元素上设置text-align: center。
垂直居中只需要设置其line-height的大小和其父元素的height相同即可

块元素

对于块元素，水平居中需要要设置其margin: 0 auto
但是垂直居中就是一个比较麻烦的问题了。

• 解决方案一:
  对于有固定大小的元素,使用position:absolute,并指定top:50%和left50%.
  然后设置:margin-left:-width/2和margin-top:height/2.
  通过这样的设定，使得元素的中心点正好处于父元素的中心位置，这样便实现了元素的水平和垂直居中。

• 解决方案二:
  那如果不知道元素的宽和高呢，可以考虑使用transform:translate(-50%, -50%),使元素向移动自身大小的50%的距离。
  其解决的思路和方案一时一样的。
  以上内容参考自CSS秘密花园:垂直居中

• 解决方案三:
  对于一个已经被设置为float属性的元素，如何将其垂直居中呢？
  可以在其外包裹一父级元素&ltspan&gt，并使其line-height充满span的父级元素，此时设置span内的元素为display:inline-block.
  此方案参考自:垂直居中一个浮动元素