CSS实现元素水平垂直居中

css实现元素水平垂直居中

一共有十种方法

需要知道元素宽高

    （1）position+（-margin）
    （2）position+margin：auto
    （3）position+cal

不必需要知道元素的宽高

   （4）position+transform
   （5）flex布局
	        display:flex;
	        justify-content:center;
	        align-items:center;
   （6）table
   （7）css-table
	      父元素 {使用display：table-cell
	       text-align:center;
	       vertical-align:middle;
	       }
	       子元素{
	       display：initial-block;
	       }
   （8）line-height：
			display：inline-block;将元素设置为行内样式，
			使用text-align:center实现水平方向的居中；
			使用vertical-align:middle实现垂直方向的居中；
   （9）writing-mode：
	       这个属相可以将元素转变方向，水平方向可以变为垂直方向。
	       神奇的是，水平方向上的css属性会变到垂直方向上。
	       所以水平方向上的text-align:center与writing-mode可以实现垂直方向上的居中。
	       其中：wirting-mode:vertical-lr;实现水平变垂直。
	       wirting-mode:horizontal-tb;实现垂直变水平。
	       对于wirting-mode的学习介绍，各位小伙伴可以自行查询一下，便于理解。
   （10） grid：
		    CSS新出的网格布局，兼容性不太好。但是也可以实现水平垂直居中。
		    display：grid;
		    align-self:center;
		    justify-self:center;

详情查看：http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/