前端元素居中问题 水平居中 垂直居中 水平垂直居中

1.内联元素水平居中
如果被设置元素为文本，图片等行内元素时，水平居中是通过给父元素设置 text-align：center 来实现的。

父元素{text-align：center}

2.定宽块状元素水平居中
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中 margin:0 auto。

元素{margin:0 auto}
/*注：当元素设置浮动（float），absolute，fixed后，左右margin为auto将会失效。*/

3.不定宽块状元素水平居中；
方案一：

父元素{text-align:center;}
子元素 {display:inline-block;}

方案二：

父元素{display:table;margin:0 auto;}
/*注：display:table;将元素转换为表格形式。*/

4.定宽高的元素在屏幕窗口水平垂直都居中，

元素{
 	width:value;
	height:value;
 	position:fixed;
 	top:50%;
 	left:50%;
 	margin-left:-width/2+px;
 	margin-top:-width/2+px;
 }

5.不定宽高的元素在屏幕窗口水平垂直都居中，

    元素{
    	position:fixed;
    	left:0;
    	right:0;
    	top:0;
    	bottom:0;
    	margin:auto;
    }

6.不定宽高的子元素在父元素中水平垂直都居中，
方案一：

  父元素{
          position:relative;
       }
  子元素{
          position:absolute;
   		  left:0;
   		  right:0;
   		  top:0;
   		  bottom:0;
   		  margin:auto;
       }

方案二：

父元素{
         display:table-cell;
         text-align:center;
         vertical-align:middle;
     }
  /*注：display:table-cell;将元素转换为表格单元格形式*/