元素居中

一、行內元素水平居中

　　text-align: center;

二、行內元素垂直居中

　　height: 40px;line-height: 40px;    讓這兩個值相等

三、塊級元素水平居中

 width: 300px; margin: 0 auto;     可以不設置高度

三、塊級元素垂直居中

　　1.固定寬高塊級元素垂直居中

            div{ width: 200px;
		height: 100px;
		line-height: 100px;
		border: 1px solid #000;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 50%;
                margin-left: -100px;
		margin-top: -50px;
            }    

　　2.寬高是百分比的塊級元素垂直居中

         div{
               width: 10%;
		height: 30%;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;   
}     

　　3.寬高不固定的塊級元素垂直居中

        div{
             
		transform: translate(-50%,-50%);/*此時的百分數是以自身的寬高為參考*/
		/*width: 1500px;

		height: 300px;*/

		/*width: 300px;*/

		width: 30%;

		height: auto;