H5 div 居中显示

最新推荐文章于 2024-08-19 10:00:49 发布

K_Hello

最新推荐文章于 2024-08-19 10:00:49 发布

阅读量2.6k

点赞数

文章标签： css html js css3

本文链接：https://blog.csdn.net/K_Hello/article/details/114986366

版权

H5 div 居中显示

文章目录

- - 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>