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


相关推荐

  • 关于Http_build_query的用法

    关于Http_build_query的用法

    2021年11月8日
    45
  • qcustomplot绘图[通俗易懂]

    qcustomplot绘图[通俗易懂]绘制不同颜色柱状条的柱状图及折线曲线图

    2022年10月10日
    0
  • 软件版本号命名规范1.0.0.1什么意思_医疗器械软件版本号命名规范

    软件版本号命名规范1.0.0.1什么意思_医疗器械软件版本号命名规范软件版本号命名规范总原则标准的版本号必须采用XYZ的格式,并且X、Y和Z为非负的整数,禁止在数字前方补零版本是严格递增的,此处是:16.2.0->16.3.0->16.3.1在发布重要版本时,可以发布alpha,rc等先行版本alpha和rc等修饰版本的关键字后面可以带上次数和meta信息版本的优先层级指的是不同版本在排序时如何比较。判断优先层级时,必…

    2022年9月10日
    0
  • Java项目的开发流程「建议收藏」

    Java项目的开发流程「建议收藏」一个java开发项目过程:       1、项目启动  1)、项目组成立(公司成员、客户成员)  2)、制定项目预期目标  3)、制定项目计划周期  4)、建立好项目组成员沟通机制  2、需求调研  1)、创建调研计划、协调调研时间  2)、收集客户资料,获取客户需求  所有的资料都需要保留一份,资料中存疑的需要及时询问

    2022年6月22日
    36
  • 详解 CAP 定理 Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性)…

    详解 CAP 定理 Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性)…CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性)、Availability(可用性)、Partitiontolerance(分区容错性),三者不可得兼。分布式系统(distributedsystem)正变得越来越重要,大型网站几乎都是分布式的。分布式系统的最大难点,就是各个节点的状态如何同步。CAP定理是这方面的基本定理,也是理解分布式…

    2022年7月25日
    4
  • macpro录屏快捷键_mac屏幕录制设置

    macpro录屏快捷键_mac屏幕录制设置在视频内容越来越丰富的今天,录屏是我们经常会用到的一个功能,不管是录制一些无法下载的视频还是录制屏幕制作自己的视频,都需要用到录屏功能,本文中我们来推荐几款好用的Mac录屏软件Mac系统自带的录屏工具虽然我们可能天天都在使用Mac系统,但是可能很多人都不知道,其实Mac已经自带了一个好用的截图和录屏工具,你可以随时使用Command+Shift+5快捷键调出Mac自带的录屏功…

    2022年9月25日
    0

发表回复

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

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