flex布局 div盒子居中
时间:2022-07-22
本文章向大家介绍flex布局 div盒子居中,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
直接上代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮箱验证测试</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html{
width: 100%;
height:100%;
}
.top{
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
.cen{
width: 250px;
height: 250px;
background: rgba(110,150,150,0.2);
border-radius: 10px;
}
input {
border-radius: 5px;
}
</style>
</head>
<body>
# 这里是外层div,开启flex 布局
<div class="top">
# 这里是内层div,接收top flex 弹性盒子设置属性。
<div class="cen" >
<form method="post" action="">
用户名:<input type="text" name="username"><br>
密码:<input type="text" name="password"><br>
验证邮箱:<input type="text" name="mall"><br>
{# 内容 :<input type="text" name="text"><br>#}
<input type="submit" value="验证">
</form>
<hr>
<div >
<form method="get" action="/sigin">
输入激活码:<input type="text" name="code">
<input type="submit" value="提交">
</form>
</div>
<hr>
<div >
<form method="get" action="/deng">
账号:<input type="text" name="username"><br>
密码:<input type="text" name="password"><br>
<input type="submit" value="提交">
</form>
</div>
</div>
</div>
</body>
</html>
- 经验分享:社会工程学数据库搭建TIPS
- 过时但仍值得学习的选项卡TabHost
- 你所不知道的渗透测试:应用虚拟化的攻防
- C++中const小结
- 很多人不知道还有这个——搜索框组件SearchView
- 免费主题暗藏后门,波及WordPress等知名CMS系统
- 揭秘:针对PoS机的恶意软件工具箱
- 屏幕宽高不够,滚动视图ScrollView来凑
- 结合中间人攻击,Pidgin鸡肋漏洞变废为宝
- 日历视图CalendarView和定时器Chronometer
- 不用Linux也可以的强大文本处理方法
- 虚函数与虚继承寻踪
- AnalogClock、DigitalClock和TextClock时钟组件
- Sqlmap联合Nginx实现“地毯式”检测网站SQL注入漏洞
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spark Opeartor的指标体系
- R-基本绘图参数(Ⅰ)
- NVIDIA TensorRT Inference Server on Kubernetes
- Kubernetes 环境的 Tensorflow Serving on S3
- 数据处理|数据框重铸
- Go mod 常见问题(持续更新)
- R In Action|创建数据集
- R语言进阶之生存分析
- R In Action |基本数据管理
- R|apply,tapply
- python中的基本运算
- 助力联邦——Pulsar在Angel PowerFL联邦学习平台中的应用
- 让数据跃然“图”上!腾讯位置服务数据可视化API正式发布
- 腾讯云 Serverless 衔接 Kafka 上下游数据流转实战
- Tensorflow 测试一段能运行在 GPU 的代码