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 字符串 替换 最后,如何替换php字符串中最后一个字符

    php 字符串 替换 最后,如何替换php字符串中最后一个字符如何替换php字符串中最后一个字符发布时间:2020-08-1010:36:23来源:亿速云阅读:91作者:Leah这篇文章运用简单易懂的例子给大家介绍如何替换php字符串中最后一个字符,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。php替换字符串最后一个字符的方法:首先使用PHP中的“substr”函数或者“mb_substr”截取字符串至倒数第一位;然后拼接自己想要的数…

    2022年5月23日
    35
  • 骑成一个故事

    骑成一个故事

    2021年7月26日
    126
  • 分子生物学词汇(L~O)

    分子生物学词汇(L~O)                lacoperon 乳糖操纵子                laccase 漆酶                lacmus 石蕊                lactalbumin 乳白蛋白,乳清蛋白                lactam 内酰胺                lactamase 内酰胺酶                la

    2022年7月11日
    47
  • 计算机错误代码0X000000be,电脑蓝屏0x000000be怎么解决

    计算机错误代码0X000000be,电脑蓝屏0x000000be怎么解决相信遇到过蓝屏的用户都知道,当蓝屏出现时,Windows操作系统的蓝屏死机提示已经成为标志性的画面,是令使用者颇为烦恼的电脑故障。用户遇到电脑蓝屏代码0x000000BE时何解?下面,小编就来跟大家介绍一下电脑蓝屏出现代码0x000000BE的解决方法。电脑蓝屏0x000000be怎么解决1、首先我们要知道0x000000BE错误表示硬件设备的驱动程序试图向只读内存错误地写入数据。这个错误一般是因…

    2022年10月8日
    5
  • PSRSALSA 教程[通俗易懂]

    PSRSALSA 教程[通俗易懂]psrsalsa的安装与使用

    2022年7月26日
    10
  • python十进制转二进制循环,python十进制转二进制的详解

    python十进制转二进制循环,python十进制转二进制的详解python十进制转二进制的详解发布时间:2020-09-1611:46:35来源:脚本之家阅读:105作者:Vpython十进制转二进制python中十进制转二进制使用bin()函数。bin()返回一个整数int或者长整数longint的二进制表示。下面是使用示例:>>>bin(10)’0b1010′>>>bin(20)’0b10100’补…

    2025年8月4日
    3

发表回复

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

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