实现未知宽高元素垂直居中

实现未知宽高元素垂直居中的几种方法

方法1

思路：设置父级元素为table显示，子元素为table-cell,利用vertical-align：middle,实现水平居中。
优点：父级元素可以动态改变高度


实现效果：

方法2

思路：子元素绝对定位，像上面那个父级元素居中一样设置即可
优点：高大上

方法3

思路：使用flex布局
优点：简单，快捷

小tips：



• positon定位为静态定位（static)时，设置top，left属性无效,margin有效。absolute和relative属性时有效且包括maigin


• flex布局
  属性详解：