1. 程式人生 > >不知道寬高,水平-垂直居中顯示

不知道寬高,水平-垂直居中顯示

1、Css3使用translate屬性,使不知道寬度、高度的元素實現水平、垂直居中

Css3程式碼:

.wrapper{ 
				padding:20px;
				background: orange;
				color: #fff;
				position: absolute;
				top:50%;
				left: 50%;
				-webkit-transform:translate(-50%,-50%); 
				-moz-transform:translate(-50%,-50%);
				-transform:translate(-50%,-50%);
			}

Html程式碼:

<div class="wrapper">我不知道我的寬度和高是多少,我要實現水平垂直居中</div>

講解:1、將div設定為絕對定位,並位於視窗的top:50%;left:50%處,

2、translate左、上分別移動-50%,此處是相對於div本身的寬、高進行移動的

上邊兩條綜合可實現水平、垂直居中顯示