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

news2024/11/14 13:42:15

效果

 

实现

给父盒子宽高和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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

管理类联考——写作——论说文——实战篇——行文篇——通用性强,解释多种现象的经典理论——谈必要

前言 本节内容涉及“社会分工理论”“资源稀缺性”“瓶颈理论”等理论。这些理论一般用在“利大于弊式结构”中“整体有必要”的部分&#xff0c;也可用于“AB二元类”题目“谈好处”的部分。 需要注意的是&#xff0c;“有好处”一般指有它更好&#xff1b;“有必要”一般指没…

基于人工智能的中医图像分类系统设计与实现

华佗AI 《支持中医,永远传承古老文化》 本存储库包含一个针对中药的人工智能图像分类系统。该项目的目标是通过输入图像准确识别和分类各种中草药和成分。 个人授权许可证 版权所有 2023至2050特此授予任何获得华佗AI应用程序(以下简称“软件”)副本的人免费许可,可根据以…

285 · 高楼大厦

链接&#xff1a;LintCode 炼码 - ChatGPT&#xff01;更高效的学习体验&#xff01; 题解&#xff1a; 1.从左往右维护一个单调递减&#xff0c;栈的长度就是&#xff0c;可以看到最多的高楼 2.从右往后也是维护一个单调递减的栈 class Solution { public:/*** param arr:…

Python中的PDF文本提取:使用fitz和wxPython库(带进度条)

引言&#xff1a; 处理大量PDF文档的文本提取任务可能是一项繁琐的工作。本文将介绍一个使用Python编写的工具&#xff0c;可通过简单的操作一键提取大量PDF文档中的文本内容&#xff0c;极大地提高工作效率。 import wx import pathlib import fitzclass PDFExtractor(wx.Fr…

谷歌、Edge等浏览器截图长图的方法

目录 序 谷歌浏览器 步骤1&#xff1a;打开开发者工具&#xff08;右上角->更多开发工具->开发工具&#xff09;也可以直接按F12 步骤2&#xff1a;按组合键CtrlShiftP&#xff0c;打开浏览器的console功能菜单的指令搜索栏 步骤3&#xff1a;搜索框输入full,找到Cap…

LeetCode--HOT100题(19)

目录 题目描述&#xff1a;54. 螺旋矩阵&#xff08;中等&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;54. 螺旋矩阵&#xff08;中等&#xff09; 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 Le…

socker套接字

1.打印错误信息 2.socketaddr_in结构体 结构体&#xff1a; &#xff08;部分库代码&#xff09; (宏中的##) 3.manual TCP: SOCK_STREAM &#xff1a; 提供有序地&#xff0c;可靠的&#xff0c;全双工的&#xff0c;基于连接的流式服务 UDP: 面向数据报

C语言单链表OJ题(较易)

一、移除链表元素 leetcode链接 题目描述&#xff1a; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 思路&#xff1a; 正常遍历&#xff0c;找到value的值与题目中相同的结点去fr…

Statefulset 实战 3

上一部分我们说到如何使用 Statefulset 部署有状态的应用&#xff0c;Statefulset 可以做到部署的 每一个 pod 能够独立的拥有一个持久卷声明和持久卷 之前我们 用 Statefulset 和 ReplicaSet 对比&#xff0c;自然他们是有相似之处和不同之处&#xff0c;不同之处前面的文章已…

【云原生】K8S二进制搭建三:高可用配置

目录 一、部署CoreDNS二、配置高可用三、配置负载均衡四、部署 Dashboard 一、部署CoreDNS 在所有 node 节点上操作 #上传 coredns.tar 到 /opt 目录中 cd /opt docker load -i coredns.tar在 master01 节点上操作 #上传 coredns.yaml 文件到 /opt/k8s 目录中&#xff0c;部…

vue2-vue实例挂载的过程

1、思考 new Vue()这个过程中究竟做了什么&#xff1f;过程中是如何完成数据的绑定&#xff0c;又是如何将数据渲染到视图的等等。 2、分析 首先找到vue的构造函数。 源码位置&#xff1a;/src/core/instance/index.js options是用户传递过来的配置项&#xff0c;如data、meth…

通讯协议032——全网独有的OPC HDA知识一之聚合(一)

本文简单介绍OPC HDA规范的基本概念&#xff0c;更多通信资源请登录网信智汇(wangxinzhihui)。 本节旨在详细说明HDA聚合的要求和性能。其目的是使HDA聚合标准化&#xff0c;以便HDA客户端能够可靠地预测聚合计算的结果并理解其含义。如果用户需要聚合中的自定义功能&#xff…

Maven出现报错 ; Unable to import maven project: See logs for details错误的多种解决方法

问题现象; IDEA版本&#xff1a; Maven 版本 &#xff1a; 3.3.9 0.检查 maven 的设置 &#xff1a;F:\softeware\maven\apache-maven-3.9.3\conf 检查setting.xml 配置 本地仓库<localRepository>F:\softeware\maven\local\repository</localRepository>镜像…

观察者模式(C++)

定义 定义对象间的一种一对多(变化)的依赖关系&#xff0c;以便当一个对象(Subject)的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并自动更新。 ——《设计模式》GoF 使用场景 一个对象&#xff08;目标对象&#xff09;的状态发生改变&#xff0c;所有的依赖对…

信息论之从熵、惊奇到交叉熵、KL散度和互信息

一、熵&#xff08;PRML&#xff09; 考虑将A地观测的一个随机变量x&#xff0c;编码后传输到B地。 这个随机变量有8种可能的状态&#xff0c;每个状态都是等可能的。为了把x的值传给接收者&#xff0c;需要传输⼀个3⽐特的消息。注意&#xff0c;这个变量的熵由下式给出: ⾮…

掌握主动权:职场中如何主动寻找并拓宽工作领域

引言 在现代职场的竞争环境中&#xff0c;主动性是一种重要的优势。对于企业而言&#xff0c;员工的主动性是其成功的关键因素之一。而对于个人职业发展来说&#xff0c;主动性能帮助我们把握更多的机会&#xff0c;提升我们的职业能力。因此&#xff0c;学会在职场中主动寻找…

glut太阳系源码修改和对cpu占用观察

#include <GL/glut.h> static int day 100; // day 的变化&#xff1a;从 0 到 359 void myDisplay(void) {//glEnable(GL_DEPTH_TEST);glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluPerspective(75, 1, 1, 40…

车载软件架构 —— 车载软件安全启动关键技术解读

车载软件架构 —— 车载软件安全启动关键技术解读 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生…

Android学习之路(1) App工程的项目结构

一、App工程的项目结构 1.项目下面有两个分类 一个是app(代表app模块)&#xff0c;另一个是Gradle Scripts。其中app下面又有3个子目录&#xff0c;其功能说明如下&#xff1a; manifests 子目录下面只有一个XML文件&#xff0c;即AndroidManifest.xmljava子目录&#xff0c;…

LeetCode-Java(04)

15. 三数之和 固定第一个数&#xff0c;从后面找第二个和的三个数的和等于第一个数&#xff0c;转化为两数之和问题。比target大&#xff0c;则l--&#xff0c;否则r,直到找到三个数 class Solution {public List<List<Integer>> threeSum(int[] nums) {List<L…