各种html小问题

1：div在画面居中

控件居中，并位于页面底部

.animate {
				position: relative;
				bottom: 12%;
				width: 100%;
				color: #fff;
				display: -moz-box;
				text-align: center;
			}

2：控件显示与隐藏

document.getElementById("toMain").style.display="";//显示
document.getElementById("toLogin").style.display="none";//隐藏

3：背景图片设置

背景自动拉伸或缩小占满整个画面，页面不能上下滑动了

.bg{
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: -10;
			background-image: url(images/bg2.png);
			background-repeat: no-repeat;
			background-position: 0px 0px;
			background-size: 100% 100%;
			}

背景图片宽度高度都自适应背景，页面可以上下滑动

.bg{
	background-image: url(images/bg6.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 100% 100%;
	}

4：图片宽度是屏幕的100%，高度是75%

图片位于屏幕最上方，宽度与屏幕一样，高度为屏幕的75%

.manual{
				width: 100%;
				height: auto;
				overflow: hidden;
				margin: 0 auto;
				text-align: center;
				margin-top: 0px;
			}
			.manual img {
				width: 100%;
				height: 75vh;
				border: 0px solid #000;
				/* 上，右，下，左 */
				float: left;
			}


<div class="manual">
				<img src="../images/manual.png">
</div>

5：div中的控件垂直居中

给div加上这个，可以垂直居中

.box2{
		display: flex;/*Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效*/
		justify-content:center;/*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。*/
		align-items:Center;/*align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。*/
}

6：sec:authorize = “hasAuthority(‘xx’)”

hasAuthority(‘xx’)为false没权限
hasAuthority(‘xx’)为true有权限
没权限的时候，想让页面不显示这个控件就在pom.xml中添加

<dependency>
			<groupId>org.thymeleaf.extras</groupId>
			<artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency>