css如何使一个盒子水平垂直居中

server/2024/10/16 2:29:37/

方法一:利用定位(常用方法,推荐)

javascript"><style>
.parent{width: 500px;height: 500px;border: 1px solid #000;position:relative;
}.child {width: 100px;height: 100px;border: 1px solid #999;position:absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
}
</style>

方法二:利用 margin:auto;

javascript"><style>.parent{width: 500px;height: 500px;border: 1px solid #000;position:relative;}.child {width: 100px;height: 100px;border: 1px solid #999;position:absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}
</style>

方法三:利用 display:flex;设置垂直水平都居中

javascript"><style>.parent{width: 500px;height: 500px;border: 1px solid #000;display: flex;justify-content: center;align-items: center;}.child {width: 100px;height: 100px;border: 1px solid #999;}
</style>

方法四:利用 transform

javascript"><style>.parent{width: 500px;height: 500px;border: 1px solid #000;position:relative;}.child {width: 100px;height: 100px;border: 1px solid #999;position:absolute;top: 50%;left: 50%;transform:translate(-50%, -50%);}
</style>


http://www.ppmy.cn/server/100944.html

相关文章

CVE-2024-38077:Windows远程桌面授权服务的‘隐形杀手’——深度剖析与紧急防护策略

文章目录 CVE-2024-38077&#xff1a;Windows远程桌面授权服务的‘隐形杀手’——深度剖析与紧急防护策略1 漏洞描述2 漏洞影响2.1 处置优先级&#xff1a;高2.2 影响版本 3 漏洞检测3.1 漏洞检测工具3.2 漏洞检测工具使用介绍3.2.1 漏洞检测工具当前支持三种方式检测3.2.2 漏洞…

linux下串口通信相关知识

三种工作模式 当ICANON 标志被设置时表示启用终端的规范模式&#xff0c;默认情况为规范模式。 规范模式下&#xff0c;所有的输入是基于行进行处理的。在用户输入一个行结束符&#xff08;回车符、EOF 等&#xff09;之前&#xff0c;系统调用read()函数是读不到用户输入的任…

第十一章:图论part06 108.冗余连接 109.冗余连接II (补)

任务日期&#xff1a;7.31 题目一链接&#xff1a;108. 冗余连接 (kamacoder.com) 思路&#xff1a;从前到后遍历边&#xff0c;如果当前两个点不在一个集合就使他们加入到一个集合&#xff0c;构成树&#xff0c;如果位于一个集合则输出他们&#xff0c;因为如果把他们加入就…

【STM32 Blue Pill编程】-STM32CubeIDE开发环境搭建与点亮LED

开发环境搭建与点亮LED 文章目录 开发环境搭建与点亮LED1、STM32F103C8T6及STM32 Blue Pill 介绍2、下载并安装STM32CubeIDE3、编程并点亮LED3.1 在Stm32CubeIDE中编写第一个STM32程序3.1.1 创建项目3.1.2 设备配置3.1.2.1 系统时钟配置3.1.2.2 系统调试配置3.1.2.3 GPIO配置3.…

代码随想录算法训练营第 45 天 |LeetCode 115.不同的子序列 LeetCode583. 两个字符串的删除操作 LeetCode72. 编辑距离

代码随想录算法训练营 Day45 代码随想录算法训练营第 45 天 |LeetCode 115.不同的子序列 LeetCode583. 两个字符串的删除操作 LeetCode72. 编辑距离 目录 代码随想录算法训练营前言LeetCode 115.不同的子序列LeetCode583. 两个字符串的删除操作LeetCode72. 编辑距离 一、Leet…

Java填充PDF并返回填充后PDF文件及对应base64码

前期准备 下载PDF编辑工具&#xff08;Adobe Acrobat 9 Pro&#xff09;&#xff1a; 可以主页关注小程序【白哥Java】回复【PDF编辑软件】即可获取 或者直接联系博主也可 主页如下&#xff1a; 软件使用流程 此处流程为文本域流程 图片或其他大致相同 生成模板PDF样式如下&…

Node.js、npm和ng之间的关系

一、Node.js 定义&#xff1a;Node.js是一个开源的、跨平台的JavaScript运行环境&#xff0c;它允许开发者在服务器端运行JavaScript代码。Node.js基于Chrome V8引擎&#xff0c;提供高性能和非阻塞I/O&#xff08;输入输出&#xff09;操作。功能&#xff1a;Node.js主要用于…

JSON与EXL文件互转

功能&#xff1a;实现json到excel文件的相互转换(支持json多选版) 目的&#xff1a;编码与语言对应&#xff0c;方便大家使用 页面设计&#xff1a; 介绍&#xff1a; 1.选择文件栏目选择想要转换的文件 2.生成路径是转换后文件所在目录 3.小方框勾选与不勾选分别代表exl到…