快速实现一个div的水平垂直居中

效果

 

实现

给父盒子宽高和flex,子盒子margin:auto 

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;  // 
            height: 100%; //
            display: flex; //

        }

        .con {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: auto; //
        }
    </style>
</head>

<body>
    <div class="con">
        <h1>居中对齐</h1>
    </div>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/61590.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

No112.精选前端面试题,享受每天的挑战和学习

文章目录 说一说JavaScript有几种方法判断变量的类型&#xff1f;说一说defer和async区别&#xff1f;HTTP&#xff08;超文本传输协议&#xff09;是什么&#xff1f;说一下浏览器输入URL发生了什么&#xff1f;一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级。求该青…

rest api client code generator

一、搜索&#xff1a;REST API Client Code Generator 二、 安装成功后 配置java环境和node环境

软件使用 | jupyter notebook 使用技巧大全

本文记录使用 jupyter notebook 的使用方法。 更新&#xff1a;2023 / 8 / 6 软件使用 | jupyter notebook 使用技巧大全 图片表格参考链接 图片 插入图片并控制大小和对其方式 1: <img src"https://www.domain.com/image_file_name.jpg" alt"ImageFile&…

MFC第二十八天 WM_SIZE应用,CFrameWnd类LoadFrame的方法,PreCreateWindow窗口预处理,Frame-view窗口视图

文章目录 WM_SIZE应用通过WM_SIZE消息实现窗口布局管理通过控件属性实现窗口布局管理 CFrameWnd类CFrameWnd类简介OnCreate和OnCreateClient的方法注册时的要素与窗口设置PreCreateWindow创建窗口的预处理函数 附录预处理函数的结构体CFrameWnd::LoadFrame与CreateFrame WM_SIZ…

程序环境和预处理(含C语言程序的编译+链接)--2

文章前言&#xff1a; 上章我们把 程序的翻译环境 程序的执行环境 C语言程序的编译链接 预定义符号介绍 预处理指令 #define 宏和函数的对比 预处理操作符 #和##的介绍 的相关知识进行了梳理讲解&#xff0c;接下来被把剩余知识 命令定义 …

机器学习:训练集与测试集分割train_test_split

1 引言 在使用机器学习训练模型算法的过程中&#xff0c;为提高模型的泛化能力、防止过拟合等目的&#xff0c;需要将整体数据划分为训练集和测试集两部分&#xff0c;训练集用于模型训练&#xff0c;测试集用于模型的验证。此时&#xff0c;使用train_test_split函数可便捷高…

数字孪生的「三张皮」问题:数据隐私、安全与伦理挑战

引言 随着数字化时代的来临&#xff0c;数据成为了当今社会的宝贵资源。然而&#xff0c;数据的广泛使用也带来了一系列隐私、安全与伦理挑战。数字孪生作为一种虚拟的数字化实体&#xff0c;通过收集和分析大量数据&#xff0c;模拟和预测现实世界中的各种情境&#xff0c;为…

【Jenkins】Jenkins 安装

Jenkins 安装 文章目录 Jenkins 安装一、安装JDK二、安装jenkins三、访问 Jenkins 初始化页面 Jenkins官网地址&#xff1a;https://www.jenkins.io/zh/download/ JDK下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/ 清华源下载RPM包地址&#xff…

简单认识ELK日志分析系统

一. ELK日志分析系统概述 1.ELK 简介 ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 好处&#xff1a; &#xff08;1&#xff09;提高安全…

【每天40分钟,我们一起用50天刷完 (剑指Offer)】第四十八天 48/50【字符串处理】【最低公共祖先】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09;   文章字体风格&#xff1a; 红色文字表示&#…

DQN原理和代码实现

参考&#xff1a;王树森《强化学习》书籍、课程、代码 1、基本概念 折扣回报&#xff1a; U t R t γ ⋅ R t 1 γ 2 ⋅ R t 2 ⋯ γ n − t ⋅ R n . U_tR_t\gamma\cdot R_{t1}\gamma^2\cdot R_{t2}\cdots\gamma^{n-t}\cdot R_n. Ut​Rt​γ⋅Rt1​γ2⋅Rt2​⋯γn−…

基于 APN 的 CXL 链路训练

&#x1f525;点击查看精选 CXL 系列文章&#x1f525; &#x1f525;点击进入【芯片设计验证】社区&#xff0c;查看更多精彩内容&#x1f525; &#x1f4e2; 声明&#xff1a; &#x1f96d; 作者主页&#xff1a;【MangoPapa的CSDN主页】。⚠️ 本文首发于CSDN&#xff0c…

Dockerfile构建mysql

使用dockerfile构建mysql详细教学加案例 Dockerfile 文件 # 使用官方5.6版本&#xff0c;latest为默认版本 FROM mysql:5.6 #复制my.cof至容器内 ADD my.cnf /etc/mysql/my.cof #设置环境变量 密码 ENV MYSQL_ROOT_PASSWORD123456my.cof 文件 [mysqld] character-set-server…

LNMP搭建

LNMP&#xff1a;目前成熟的企业网站的应用模式之一&#xff0c;指的是一套协同工作的系统和相关软件 能够提供静态页面服务&#xff0c;也可以提供动态web服务。 这是一个缩写 L linux系统&#xff0c;操作系统。 N nginx网站服务&#xff0c;也可也理解为前端&#xff0c…

企业计算机服务器中了locked勒索病毒怎么办,如何预防勒索病毒攻击

计算机服务器是企业的关键信息基础设备&#xff0c;随着计算机技术的不断发展&#xff0c;企业的计算机服务器也成为了众多勒索者的攻击目标&#xff0c;勒索病毒成为当下计算机服务器的主要攻击目标。近期&#xff0c;我们收到很多企业的求助&#xff0c;企业的服务器被locked…

uni-app、H5实现瀑布流效果封装,列可以自定义

文章目录 前言一、效果二、使用代码三、核心代码总结 前言 最近做项目需要实现uni-app、H5实现瀑布流效果封装&#xff0c;网上搜索有很多的例子&#xff0c;但是代码都是不够完整的&#xff0c;下面来封装一个uni-app、H5都能用的代码。在小程序中&#xff0c;一个个item渲染…

Godot 4 源码分析 - Path2D与PathFollow2D

学习演示项目dodge_the_creeps&#xff0c;发现里面多了一个Path2D与PathFollow2D 研究GDScript代码发现&#xff0c;它主要用于随机生成Mob var mob_spawn_location get_node(^"MobPath/MobSpawnLocation")mob_spawn_location.progress randi()# Set the mobs dir…

【机器学习】编码、创造和筛选特征

在机器学习和数据科学领域中&#xff0c;特征工程是提取、转换和选择原始数据以创建更具信息价值的特征的过程。假设拿到一份数据集之后&#xff0c;如何逐步完成特征工程呢&#xff1f; 文章目录 一、特性类型分析1.1 数值型特征1.2 类别型特征1.3 时间型特征1.4 文本型特征1.…

Android Studio安装AI编程助手Github Copilot

csdn原创谢绝转载 简介 文档链接 https://docs.github.com/en/copilot/getting-started-with-github-copilot 它是个很牛B的编程辅助工具&#xff0c;装它&#xff0c;快装它&#xff0e; 支持以下IDE: IntelliJ IDEA (Ultimate, Community, Educational)Android StudioAppC…

数据库操作系列-Mysql, Postgres常用sql语句总结

文章目录 1.如果我想要写一句sql语句&#xff0c;实现 如果存在则更新&#xff0c;否则就插入新数据&#xff0c;如何解决&#xff1f;MySQL数据库实现方案: ON DUPLICATE KEY UPDATE写法 Postgres数据库实现方案:方案1&#xff1a;方案2&#xff1a;关于更新&#xff1a;如何实…