div上下左右居中方法

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

{ position:fixed;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    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:0;
    right:0;
    top:0;
    bottom:0;
    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:1;
}
/*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%);
}