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


相关推荐

  • 马蜂窝裁php换java,php又又又凉凉了吗[通俗易懂]

    马蜂窝裁php换java,php又又又凉凉了吗

    2022年2月12日
    42
  • WebRTC中的信令和内网穿透技术 STUN / TURN

    WebRTC中的信令和内网穿透技术 STUN / TURNTranslatedfromWebRTCintherealworld:STUN,TURNandsignaling.最近刚接触到WebRTC,网上看到这篇介绍WebRTC的文章不错,仔细读了读还算有用,分享出来能帮到一些刚入门的人也挺好的,翻译不好的地方可以直接看原文。WebRTC可以进行P2P点对点通信,但是WebRTC仍然需要服务器:客户端需要服务器交换一些数据来协…

    2022年7月16日
    17
  • platform_driver_register( )过程追踪

    platform_driver_register( )过程追踪以下代码源于linux3.1.9。platform_driver_register()是内核中非常著名的函数。platform_driver_register()负责注册平台驱动程序,如果在内核中找到了使用驱动程序的设备,调用probe()。刨去参数检查、错误处理,platform_driver_register的主要过程如下:。。。{。。。retur…

    2022年7月26日
    21
  • jquery输入数字随机抽奖特效

    简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果。效果展示 http://hovertree.com/te

    2021年12月26日
    63
  • golang:[]byte转string

    golang:[]byte转stringgolang中,字符切片[]byte转换成string最简单的方式是packagemainimport(“fmt”_”unsafe”)funcmain(){bytes:=[]byte(“Iambytearray!”)str:=string(bytes)bytes[0]=’i’//注意这一行,bytes在这里修改了数据,但是str打印出来的依然没变化,fmt.Println(str)}打印信息:I

    2022年6月16日
    37
  • 微元素——答题

    微元素——答题微元素——答题微元素每日任务,答题

    2022年4月28日
    46

发表回复

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

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