居中div的几种方式

水平居中

.div {
		margin: 0 auto;
		width:500px ;
        height:300px;
        border: 1px solid red;
}

水平垂直居中

方式一：

 .div {
            width: 500px ;
            height: 300px;
            margin: 150px 0 0 -250px;
            position: relative;
            left: 50%;
            top: 50%;
             border: 1px solid red;
        }

方式二：

      .div {
            width: 500px ;
            height: 300px;
            margin: -150px 0 0 -250px;
            position: absolute;
            left: 50%;
            top: 50%;
             border: 1px solid red;
        }