WinJS开发win8应用是用html和css做的界面,经常需要内容水平或垂直居中。
此时就需要网格布局来实现了,也很方便和容易。
构造出水平或垂直居中内容,需要两个div。
div1 填充整个区域,并设置为1行1列的网格布局:
.div1{
100%;
height:100%;
display:-ms-grid;
-ms-grid-columns:1fr;
-ms-grid-rows:1fr;
}
div2 在网格内并包裹要居中的内容。就可以设置网格居中的css样式了从而达到内容居中:
.div2{
-ms-grid-row-align:center;
-ms-grid-column-align:center;
}
这样就做到了内容的垂直水平居中。
备注:
-ms-grid-row-align 设置内容在行中的对其方式 start行头 end行尾 center行的中间
-ms-grid-column-align 设置内容在列中的对其方式 start列头 end列尾 center列的中间