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


相关推荐

  • RT-thread —- FinSH 控制台

    RT-thread —- FinSH 控制台一、介绍FinSH是RT-Thread的命令行组件(shell),有了shell,就像在开发者和计算机之间架起了一座沟通的桥梁,开发者能很方便的获取系统的运行情况,并通过命令控制系统的运行。特别是在调试阶段,有了shell,开发者除了能更快的定位到问题之外,也能利用shell调用测试函数,改变测试函数的参数,减少代码的烧录次数,缩短项目的开发时间。FinSH支持两种输入模式…

    2022年5月22日
    49
  • 单片机控制步进电机程序c语言正反转停止,单片机控制步进电机正反转程序

    单片机控制步进电机程序c语言正反转停止,单片机控制步进电机正反转程序该楼层疑似违规已被系统折叠隐藏此楼查看此楼#include”reg52.h”#defineuintunsignedint#defineucharunsignedcharsbitk1=P3^4;sbitk2=P3^5;sbitk3=P3^6;voiddelay(uintxms){uinti,j;for(i=xms;i>0;i–)for(j=110;j>0;j-…

    2022年5月31日
    53
  • log4j使用方法_altium16详细使用教程

    log4j使用方法_altium16详细使用教程日志是应用软件中不可缺少的部分,Apache的开源项目Log4j是一个功能强大的日志组件,提供方便的日志记录。在apache网站:jakarta.apache.org/log4j可以免费下载到Log4j最新版本的软件包。

    2022年9月5日
    3
  • C语言整型转字符串_c++整形转字符串

    C语言整型转字符串_c++整形转字符串本文主要介绍在C++编程语言中,将整型转换为字符串类型的具体方法。1使用to_string函数在C++11标准中,可以使用to_string函数,将整型转换为字符串类型。1.1to_string函数介绍to_string函数的用法如下:stringto_string(intval);stringto_string(longval);stringto_string(longlongval);stringto_string(unsigned

    2022年10月18日
    0
  • 学习Java好书及视频推荐

    学习Java好书及视频推荐要想在java领域成为大牛,除了不断进行项目实战以外,还要不断的进行进修和学习,以下将本人学习java多年使用的好书和一些好的视频推荐给大家,这些书和视频都是本人在网络找了很久,后来又经过实践证明的好书和视频。希望对大家学习java有帮助首先,是书的推荐:1学习java,java基础,1.0入门:HeadFirstJava(中文版)这本书,我没看过,但是在当当网的评价是5颗星,…

    2022年6月29日
    28
  • 深入学习Linux摄像头(二)v4l2驱动框架

    深入学习Linux摄像头系列深入学习Linux摄像头(一)v4l2应用编程深入学习Linux摄像头(二)v4l2驱动框架深入学习Linux摄像头(三)虚拟摄像头驱动分析深入学习Linux摄像头(五)三星平台fimc驱动详解一深入学习Linux摄像头(六)三星平台fimc驱动详解二深入学习Linux摄像头(二)v4l2驱动框架文章目录深入学习Linux摄像头(二)v4l2驱动框架一、V…

    2022年4月8日
    197

发表回复

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

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