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>

在这里插入图片描述

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java——JDBC连接数据库(步骤详解!!!)

    Java——JDBC连接数据库(步骤详解!!!)JDBC的全称是:JavaDatabaseConnectivity,即Java数据库连接。JDBC可以通过载入不同的数据库的“驱动程序”而与不同的数据库进行连接。那么,在数据库连接的时候,我使用的是MySQL,Java集成开发环境是Eclipse。要使用JDBC来访问MySQL数据库,首先需要添加MySQL数据库驱动程序。下面,我来为大家讲解一下这其中的步骤(听着名字很高大上,但仔细看步骤会觉得其实没那么难!!!)????????????Step1:www.mysql.co

  • linux如何退出编辑状态_linux编辑文件命令 vi

    linux如何退出编辑状态_linux编辑文件命令 vilinux退出编辑模式的命令linux退出编辑模式的命令有:vim有三种模式,注意:这三种模式有很多不同的叫法,我这里是按照鸟哥的linux书中的叫法。一般指令模式、编辑模式、指令列命令模式1.vim文件名进入一般模式;2.按i进行编辑进入编辑模式;(或者I,o,O,a,A,r,R)3.编辑结束,按ESC键跳到一般模式模式;4.按:进入指令列命…

  • 国内软件外包公司排行榜是怎么样的

    国内软件外包公司排行榜是怎么样的由于互联网技术的快速发展,特别是手机移动端的的普及,使得企业越来越需要开发自己自己的软件,但是软件开发人才缺口很大,企业没有这个技术实力去开发自己的软件,对于中小企业也不好招人,而这软件外包开发公司就可以帮助企业实现目标,这其中鱼龙混杂,让不少想要软件外包开发的企业难以选择,那么国内软件外包公司排行榜是怎么样的呢?下面为大家介绍华盛恒辉排名靠前的原因。1、报价适中提供同样服务…

  • 上位机软件开发入门

    上位机软件开发入门上位机是指:人可以直接发出操控命令的计算机,一般是PC,屏幕上显示各种信号变化(液压,水位,温度等)。下位机是直接控制设备获取设备状况的的计算机,一般是PLC/单片机之类的。上位机发出的命令首先给下位机,下位机再根据此命令解释成相应时序信号直接控制相应设备。下位机不时读取设备状态数据(一般模拟量),转化成数字信号反馈给上位机。上下位机都需要编程,都有专门的开发系统。

  • IDEA快捷键大全 + 动图演示,提升效率[通俗易懂]

    IDEA快捷键大全 + 动图演示,提升效率[通俗易懂]大佬的总结,引用,备忘IntelliJIDEA快捷键大全+动图演示_水滴技术的博客-CSDN博客

  • Eclipse中SVN插件的基本使用「建议收藏」

    Eclipse中SVN插件的基本使用「建议收藏」首先在提交代码的时候,会看到有的文件前会有雪花标志,代表该文件被修改过。提交代码的时候,点击整个项目,右键—team—与资源库同步,这个目的是检查本地的代码和服务器上的代码有没有冲突,如果有冲突的话,应该像将冲突解决,否则提交代码会出错,解决冲突看我的另一篇博客。点击与资源库同步按钮之后,会跳转到TeamSynchronizing界面,这个时候eclipse会自动检测本…

发表回复

您的电子邮箱地址不会被公开。

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