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)
上一篇 2022年6月3日 下午1:36
下一篇 2022年6月3日 下午1:46


相关推荐

  • JAVA高并发的三种实现

    提到锁,大家肯定想到的是sychronized关键字。是用它可以解决一切并发问题,但是,对于系统吞吐量要求更高的话,我们这提供几个小技巧。帮助大家减小锁颗粒度,提高并发能力。初级技巧-乐观锁乐观锁使用的场景是,读不会冲突,写会冲突。同时读的频率远大于写。悲观锁的实现:悲观的认为所有代码执行都会有并发问题,所以将所有代码块都用sychronized锁住乐观锁的实现:…

    2022年4月3日
    37
  • SpringBoot中Starters是什么

    SpringBoot中Starters是什么Starters 是一组方便的依赖描述符 您可以将它们包含在您的应用程序中 您可以获得所需的所有 Spring 和相关技术的一站式服务 而无需搜索示例代码和复制粘贴加载的依赖项描述符 例如 如果您想开始使用 Spring 和 JPA 进行数据库访问 请 spring boot starter data jpa 在您的项目中包含依赖项 starters 作用解决第三个的依赖问题 一堆配置类 可以帮助我们解决很多初始化配置类的问题 我们可以做拿来主义者 不需要造轮子 解决依赖版本的问题 就程序员不需要在去关注

    2026年3月19日
    2
  • mysql倒序截取字符串_MySQL数据库之mysql截取字符串与reverse函数

    mysql倒序截取字符串_MySQL数据库之mysql截取字符串与reverse函数本文主要向大家介绍了MySQL数据库之mysql截取字符串与reverse函数,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助。这个网页上很多知识点,可以学习下,关于mysql的函数,也可以作为API查询:这里只说下mysql的截取函数和reverse函数:MySQL字符串截取函数:left(),right(),substring(),substring_index()…

    2025年6月16日
    4
  • js filter过滤数组_js一个数组过滤另一个数组

    js filter过滤数组_js一个数组过滤另一个数组数组删除指定元素,一个数组删除另一个数组所包含的值

    2026年4月14日
    6
  • 开发手机游戏的一点心得(一)

    开发手机游戏的一点心得(一)作者:风过回廊文章来源:http://www.sf.org.cn2003年三月份,我刚开始接触了手机游戏的开发。开发手机上的游戏程序,最初仅仅只是出于兴趣爱好,利用业余时间自己陆陆续续的也写了一些Code,得到了一些经验,本来是想敝帚自珍的,但是朋友的鼓励,使我决定把自己的一点点心得体会写出来,藉以告慰我在学习中所阵亡的千千万万脑细胞,也为和我一样在黑暗的艰难摸索人们中提供一些微不足道的帮助吧

    2022年4月30日
    58
  • 给 AI 助手搭了个像素办公室 —— 用 OpenClaw + Star Office UI 打造可视化工作看板

    给 AI 助手搭了个像素办公室 —— 用 OpenClaw + Star Office UI 打造可视化工作看板

    2026年3月13日
    2

发表回复

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

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