CSS之经典flex布局-垂直居中「建议收藏」

CSS之经典flex布局-垂直居中「建议收藏」<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metahttp-equiv=”X-UA-Compatible”content=”IE=edge”><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><title>flex垂直居中&lt

大家好,又见面了,我是你们的朋友全栈君。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex垂直居中</title>
  <style>
      html,body { 
   
        width: 100%;
        height: 100%;
        margin: 0
      }
      #main { 
   
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .center { 
   
        width: 100px;
        height: 100px;
        background: red
      }
  </style>
</head>
<body>
   <div id="main">
      <div class='center'></div>
   </div>
</body>
</html>

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/136511.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • 测试工程师的分类和发展方向有哪些_测试工程师就业前景

    测试工程师的分类和发展方向有哪些_测试工程师就业前景测试工程师的分类:1、功能测试工程师2、性能测试工程师3、安全测试工程师4、自动化测试工程师5、测试开发工程师6、高级测试开发工程师7、测试专家层次:第一层:1、功能测试,按需求检测

    2022年8月4日
  • 小米手机解BL锁教程

    小米手机解BL锁教程1.找到设置,找到我的设备2.点击全部参数,点miui版本,点3下。3.返回,找到更多设置4.找到开发者选项5.找到设备定状态6.绑定账号和设备,关机,按开键加音量减,进去fast模式,链接电脑。7. 电脑打开下载解锁工具:点击链接下载将解锁工具解压缩,点击unlock.exe。7.解锁工具里登入可解锁的小米账号,同时将手机进入fastboot模式(关机状态下长按音量下键和电源键),用数据线连接电脑,提示已连接手机即可,若没有驱动点击图标安装即可。8.设备已解锁-解锁成功

    2022年6月12日
  • javaweb实现分页_javaweb分页功能的代码

    javaweb实现分页_javaweb分页功能的代码首先我们要清楚java分页的思路第一我们要明白前端页面需要向java后台传递当前页码数以及每页显示多少条数据第二java后台代码需要向前端页面传递每页显示的数据,以及总条数以及总页数代码如下:首先我们要创建一个分页类用来存储数据publicclassPageObjectimplementsSerializable{privatestaticfinallongserialVersi…

    2022年9月27日
  • 芭比Q了,腰间盘给整突出了「建议收藏」

    在2022年除了腰间盘外,其他的各个方面都可以越来越突出!

    2022年3月1日
  • 开源服务器监控工具——zabbix(二)[通俗易懂]

    开源服务器监控工具——zabbix(二)[通俗易懂]基本知识及安装操作见:开源服务器监控工具——zabbix(一)使用脚本操作zabbix我们可以利用脚本来对zabbix进行操作,可以使用脚本进行登陆zabbix,发现、删除和创建要监控的主机,我们需要将要执行的操作写入脚本中。登陆mkdir/zabbixcd/zabbixvimzabbix-api.sh写入:curl-s-XPOST-H’Content-Type:a…

    2022年5月1日
  • flask中jsonify和json.dumps的区别「建议收藏」

    flask中jsonify和json.dumps的区别「建议收藏」flask提供了jsonify函数供用户处理返回的序列化json数据,而python自带的json库中也有dumps方法可以序列化json对象,那么在flask的视图函数中return它们会有什么不同之处呢?想必开始很多人和我一样搞不清楚,只知道既然框架提供了方法就用,肯定不会错。但作为开发人员,我们需要弄清楚开发过程中各种实现方式的特点和区别,这样在我们面对不同的需求时才能做出相对合理的选择,而…

    2022年5月23日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号