DIV居中代码样式
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
.frminput {
position: relative;
width: 100%;
height: 40px;
margin-bottom: 30px;
}
.label {
position: relative;
width: 100%;
height: 40px;
margin-bottom: 30px;
font-size:xx-large;
}
.ele {
position: absolute;
left:10%;
width:80%;
height:70%;
top:2%;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius:12px;
margin-left:20px;
}
.buttonhover:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.btn {
position: relative;
width: 100%;
height: 30px;
margin-top: 30px;
display: flex;/*设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效*/
display: -webkit-flex; /* Safari */
flex-direction: row;/*容器内项目的排列方向(默认横向排列 row,纵向是column)*/
flex-wrap: nowrap;/*容器内项目换行方式*/
justify-content: center;/*项目在主轴上的对齐方式*/
align-items: center;/*项目在交叉轴上如何对齐*/
align-content: center;/*定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用*/
}
</style>
</head>
<body style="background-color:blue;">
<div id="ele" class="ele">
<form name="frm" >
<span class="label" >ID:</span>
<input class="frminput" id = "staffid"/>
<span class="label" >Name:</span>
<input class="frminput" id = "staffname"/>
<span class="label" >Phone:</span>
<input class="frminput" id = "staffphone"/>
<span class="label" >Address:</span>
<input class="frminput" id = "staffaddress"/>
<div class="btn" >
<div class="button buttonhover" id = "btnSubmit" /> Submit</div>
<div class="button buttonhover" id = "btnCancel" /> Cancel</div>
</div>
</form>
</div>
</body>