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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java中 List 和 JSON字符串之间的相互转换

    Java中 List 和 JSON字符串之间的相互转换List转JSON字符串Listlist=newArrayList();Map&lt;String,String&gt;map=newHashMap&lt;&gt;();map.put("name","szy");map.put("num",2);list.add(map);StringinventoryResultStr=JSON.t…

    2022年10月17日
    1
  • 面试springbean的生命周期_session生命周期面试

    面试springbean的生命周期_session生命周期面试笑了

    2022年9月19日
    2
  • 毕业论文管理系统_本科毕业论文网

    毕业论文管理系统_本科毕业论文网毕业论文管理系统1.首先是个简约的登录页面,登录页面分为三个角色,分别是学生,老师和管理员系统的登录界面2.接下来是用户模块,分别为两个模块教师和学生的,管理员可以进行教师和学生添加和修改。3.系部管理4.文件管理,学生上传的论文,管理员和教师都可以进行下载和查看5.学生模块,学生选题,教师发布的题目学生可以进行选择。学生也可以自己申请题目6.学生申请课题7.论文初稿,学生上传论文初稿,等指导老师通过后才能进行最后的终稿8.学生上传论文,指导老师可以提建议,学生可以查看指导老师的建议9.

    2025年6月28日
    6
  • 目前主流的Eclipse版本是哪个版本?面向哪个版本的JDK?_JDK版本

    目前主流的Eclipse版本是哪个版本?面向哪个版本的JDK?_JDK版本版本代号平台版本主要版本发行日期SR1发行日期SR2发行日期需要的JDK最低版本Callisto3.22006年6月26日N/AN/AJDK1.4Europa3.32007年6月27日2007年9月28日2008年2月29日JDK1.5Ganymede3.42008年6月25日2008年9月24日2009年2月25日JDK1.5Galileo3.52009年6月24日2009年9月25日2010年…

    2022年9月23日
    3
  • C语言的数组初始化「建议收藏」

    C语言的数组初始化「建议收藏」   这是很基础的东西,但基础的重要性不言而喻,我敢肯定这个知识点我肯定曾经了解过,但现在,我不敢确定,由此可见纪录的重要性,这世界没有什么捷径,找对方向,然后不停重复.所以从今天开始,我会比较详细的纪录这些比较小的知识点,其实还是有不少有意思的地方的.   写这篇文章的起因在于>第七章新东西太多,看的我目不暇接,所以在网上找了些例子看,其中就有一个例子中出现了这样的语句: …

    2022年7月18日
    18
  • goland 2022.01 激活码_最新在线免费激活2022.03.02

    (goland 2022.01 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年4月2日
    278

发表回复

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

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