H5 div 居中显示

文章目录

H5 div 居中显示
- 推荐：[浏览器同步测试工具](http://www.browsersync.cn/#install)
- H5 引入外部CSS文件
- div居中显示
- - 块水平垂直居中
  - 子块水平垂直居中

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>

H5 div 居中显示相关推荐

设置div中的div居中显示
设置div中的div居中显示方法一. <div class='big'><div class='small'>box1</div></div>styl ...
如何使一个 div 居中显示
在 chrome 或 FireFox里,使用 body{ margin:0px; padding:0px; } div{ magin:0 auto; } 即可让一个 div 居中显示,但在 IE 里不 ...
使一个div居中显示的三种方法
使一个div居中显示的三种方法 1. <!DOCTYPE html> <html lang="en"> <head><meta chars ...
关于div居中显示的问题
关于div居中显示的问题要想设置div居中显示,只需要设置margin-right:auto 和 margin-left:auto 切记,这种方法不能设置浮动,也就是float属性.否则,达不到预 ...
前端笔记之Div居中显示
前端笔记之Div居中显示 1.水平居中:给div设置一个宽度,然后添加margin:0 auto属性 <!DOCTYPE html> <html> <head>&l ...
使用css代码实现div居中显示 div水平居中显示
使用css代码实现div居中显示 div水平居中显示属性居中显示属性需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为**margin:0 auto: ...
利用transform：translate使div居中显示
利用transform:translate使div居中显示之前一直在用这个属性让某个div居中显示,但是一直有一个困惑,我想同时让水平和垂直都居中,可是水平方向总会有一点偏差,看一下以前怎么写的. ...
使用css使div居中显示
本例以vue为例,使用text-align: center 和margin:0 auto;实现div居中显示 1.html代码 <template> <div class=&qu ...
两个div并排显示 div居中显示
div并排显示的两种方法 float:left display: inline-block; div居中显示.文字居中显示 text-align: center;margin: 0 auto

H5 div 居中显示

H5 div 居中显示

文章目录

推荐：浏览器同步测试工具

H5 引入外部CSS文件

div居中显示

块水平垂直居中

子块水平垂直居中

H5 div 居中显示相关推荐

最新文章

热门文章