H5 div 居中显示
文章目录
推荐:浏览器同步测试工具
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面
H5 引入外部CSS文件
<link type="text/css" rel="stylesheet" href="login.css" >
div居中显示
块水平垂直居中
第一种:
.div{
color:red;
background-color: red;
width: 700px;
height: 300px;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
第二种:
.div{
color:red;
background-color: red;
width: 700px;
height: 300px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -350px;
}
子块水平垂直居中
子块login在dv_login居中
.dv_login{
color:red;
background-color: red;
width: 700px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.login{
width: 100;
height: 100;
background-color: wheat;
border: black 1px solid;
}
或者
/* 这个是外部水平垂直居中 */
.div{
color:red;
background-color: red;
text-align: center;
width: 700px;
height: 300px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -350px;
}
.login{
background-color: wheat;
border: black 1px solid;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 如果子块有确定宽高,也可以用下面的 */
.login{
width:100px;
height:100px;
background-color: wheat;
border: black 1px solid;
position:absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
<div class="dv_login">
<form class="login">
<span>注册:</span>
<input type="text">
<br>
<span>密码:</span>
<input type="password">
</form>
</div>