专栏首页Kirin博客flex布局 div盒子居中

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue @import 路径问题

    //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)

    kirin
  • 利用Vue实现简易tab切换效果

    (1) 以上代码看起来似乎很简单容易懂,而且效果也能实现,但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值,因此我们有必要改进一下代...

    kirin
  • python 爬虫之搭建代理ip池–测试代理ip可用性

    kirin
  • 前端|如何制作调查问卷

    随之时代的进步,电子文档逐渐代替了纸质文档。电子文档不仅方便提交反馈而且便于存放。现在很多的公司、学校都会做许多调查(市场调查,学习调查等),为了便于收集,大多...

    算法与编程之美
  • php 页面传递数组元素

    <form action="a.php"> <input type="text" name="books[]"/> <input type="tex...

    WindWant
  • 【Python量化投资】趋向系统指标策略 ADX、DMI指标用于股票池(附源码)

    [什么是ADX] ADX(average directional indicator) 平均趋向指数,常用的趋势衡量指标。通常与趋向系统(DMI)一起使用,利用...

    量化投资与机器学习微信公众号
  • ElasticSearch(7.2.2)-映射的介绍和使用

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • MySQL Regular Expression

    MySQL provides standard SQL pattern matching as well as a form of pattern matchi...

    赵腰静
  • 4.3.4.7 Pattern Matching

    MySQL provides standard SQL pattern matching as well as a form of pattern matchi...

    赵腰静
  • NoSQL数据库在现代应用程序中的作用

    数据模型驱动不仅可以建立有效的应用程序,也可以有效地修改以合并新的特性。他们是“real-world”问题的解决和软件世界模仿现实世界的行为之间的桥梁。(是的,...

    CSDN技术头条

扫码关注云+社区

领取腾讯云代金券