div上下左右居中方法

方法一：在浏览器中只有一个div的情况

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

方法一

方法二：一个父元素div和一个已知宽度、高度的子元素div

 /*假设子元素div的大小是200*300*/
 {
     position:absolute/fixed;
     top:50%;
     left:50%;
     margin-left:-100px;
     margin-top:-150px;
 }

方法二

方法三： 一个父元素div和一个位置宽度、高度的子元素div

 /*1、position布局*/
 {
     position:absolute;
     left:;
     right:;
     top:;
     bottom:;
     margin:auto;
 }
 /*2、table布局*/
 .father{
     display:table;
 }
 .chield{
     display:table-cell;
     vertical-align:middle;
 }
 /*3、flex布局*/
 .father{
     display:flex;
     flex-direction:row;
     justify-content:center;
     align-items:center;
 }
 .chield{
     flex:;
 }
 /*translate布局*/
 {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
 }

方法三