当前位置： 首页 > news >正文

【CSS】div 盒子居中的常用方法

news 2026/2/10 22:36:06 
<body><div class="main"><div class="box"></div></div>
</body>
  1. 绝对定位加 margin: auto; ：
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;position: relative;margin: 30px auto;}.box {width: 100px;height: 100px;background-color: #f00;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
</style>
  1. 绝对定位加负 margin：
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;position: relative;margin: 30px auto;}.box {width: 100px;height: 100px;background-color: #f00;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;}
</style>
  1. margin 推动：
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;margin: 30px auto;}.box {width: 100px;height: 100px;background-color: #f00;margin: 150px 150px;}
</style>
  1. flex 居中：
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;margin: 30px auto;display: flex;justify-content: center;align-items: center;}.box {width: 100px;height: 100px;background-color: #f00;}
</style>
  1. transform：
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;margin: 30px auto;position: relative;}.box {width: 100px;height: 100px;background-color: #f00;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
</style>
  1. 子盒子宽高不确定（需要保证left和right的百分数一样，top和bottom的百分数一样）：
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;margin: 30px auto;position: relative;}.box {background-color: #f00;position: absolute;left: 25%;top: 25%;right: 25%;bottom: 25%;}
</style><body><div class="main"><div class="box"></div></div>
</body>

在这里插入图片描述

相关文章：

【CSS】div 盒子居中的常用方法

<body><div class"main"><div class"box"></div></div> </body>绝对定位加 margin: auto; &#xff1a; <style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;positio…...

编程日记 2023/11/7 4:20:59

Pytorch网络模型训练

现有网络模型的使用与修改 vgg16_false torchvision.models.vgg16(pretrainedFalse) # 加载一个未预训练的模型 vgg16_true torchvision.models.vgg16(pretrainedTrue) # 把数据分为了1000个类别print(vgg16_true) 以下是vgg16预训练模型的输出 VGG((features): S…...

编程日记 2023/11/7 4:19:58

webgoat-Path traversal

Path traversal 路径&#xff08;目录&#xff09;遍历是一种漏洞&#xff0c;攻击者能够访问或存储外部的文件和目录 应用程序运行的位置。这可能会导致从其他目录读取文件&#xff0c;如果是文件&#xff0c;则会导致读取文件 上传覆盖关键系统文件。 它是如何工作的&#…...

编程日记 2023/11/7 4:17:55

P8976 「DTOI-4」排列，贪心

题目背景 Update on 2023.2.1&#xff1a;新增一组针对 yuanjiabao 的 Hack 数据&#xff0c;放置于 #21。 Update on 2023.2.2&#xff1a;新增一组针对 CourtesyWei 和 bizhidaojiaosha 的 Hack 数据&#xff0c;放置于 #22。 题目描述 小 L 给你一个偶数 n 和两个整数a,b…...

编程日记 2023/11/7 4:16:54

使用 Python 进行自然语言处理第 5 部分：文本分类

一、说明 关于文本分类&#xff0c;文章已经很多&#xff0c;本文这里有实操代码&#xff0c;明确而清晰地表述这种过程&#xff0c;是实战工程师所可以参照和依赖的案例版本。 本文是 2023 年 1 月的 WomenWhoCode 数据科学跟踪活动提供的会议系列文章中的一篇。 之前的文章在…...

编程日记 2023/11/7 4:15:53

uni-app---- 点击按钮拨打电话功能点击按钮调用高德地图进行导航的功能【安卓app端】

uniapp---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】 先上效果图&#xff1a; 1. 在封装方法的文件夹下新建一个js文件&#xff0c;然后把这些功能进行封装 // 点击按钮拨打电话 export function getActionSheet(phone) {uni.showAct…...

编程日记 2023/11/7 4:14:52

通讯录详解（静态版，动态版，文件版）

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言进阶之路&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅数据结构探索✅C语言刷题专栏&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x…...

编程日记 2023/11/7 4:12:49

在windows中搭建vue开发环境

1.环境搭建 具体环境搭建步骤参考链接 注意该博客中初始化命令&#xff1a; vue init webpack MyPortalProject需改为小写&#xff1a; vue init webpack myportalproject不然会报错 Warning: name can no longer contain capital letters2.创建第一个vueelement ui项目 …...

编程日记 2023/11/7 4:11:48

数字化转型：云表低代码开发助力制造业腾飞

数字化转型已成为制造业不可避免的趋势。为了应对市场快速变化、提高运营效率以及降低成本&#xff0c;制造业企业积极追求更加智能化、敏捷的生产方式。在这个转型过程中&#xff0c;低代码技术作为一种强大的工具&#xff0c;正逐渐崭露头角&#xff0c;有望加速制造业的数字…...

编程日记 2023/11/7 4:10:45

Linux学习之vim跳转到特定行数

参考的博客&#xff1a;《Vim跳到最后一行的方法》 《oeasy教您玩转vim - 14 - # 行头行尾》 《Linux&#xff1a;vim 中跳到首行和最后一行》 想要跳到特定行的话&#xff0c;可以在命令模式和正常模式进行跳转。要是对于vim的四种模式不太熟的话&#xff0c;可以到博客《Linu…...

编程日记 2023/11/7 4:09:44

详解基于Android的Appium+Python自动化脚本编写

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…...

编程日记 2023/11/7 4:07:42

【马蹄集】—— 百度之星 2023

百度之星 2023 目录 BD202301 公园⭐BD202302 蛋糕划分⭐⭐⭐BD202303 第五维度⭐⭐ BD202301 公园⭐ 难度&#xff1a;钻石    时间限制&#xff1a;1秒    占用内存&#xff1a;64M 题目描述 今天是六一节&#xff0c;小度去公园玩&#xff0c;公园一共 N N N 个景点&am…...

编程日记 2023/11/7 4:06:41

大数据毕业设计选题推荐-无线网络大数据平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

编程日记 2023/11/7 4:05:39

【jvm】虚拟机之本地方法接口与本地方法库

目录 一、本地方法1.1 说明1.2 代码示例1.3 为什么要使用native method 二、现状 一、本地方法 1.1 说明 1.一个Native Method就是一个Java调用非Java代码的接口。 2.一个Native Method是这样一个Java方法&#xff1a;该方法的实现由非Java语言实现&#xff0c;比如C。 3.这个…...

编程日记 2023/11/7 4:04:36

HDFS系统操作命令大全

一&#xff0c;前言 HDFS作为分布式存储的文件系统&#xff0c;有其对数据的路径表达方式 HDFS同linux系统一样&#xff0c;均是以/作为根目录的组织形式 linux&#xff1a;/usr/local/hello.txt HDFS&#xff1a;/usr/local/hello.txt 二&#xff0c;如何区分呢&#xff1f; L…...

编程日记 2023/11/7 4:03:33

雷尼绍探头编程 9810

9810 ​ 安全移动 使用参数 参数含义#9移动速度 F#117移动速度 F#148#24X 移动 终点绝对坐标#25Y 移动 终点绝对坐标#26Z 移动 终点绝对坐标#123机床移动到终点的绝对坐标 与 终点的理论值 的 差#5041当前绝对坐标 X 值#5042当前绝对坐标 Y 值#5043当前绝对坐标 Z 值#116刀具…...

编程日记 2023/11/7 4:02:33

el-table 列分页

<template><div><el-table:data"tableData":key"tampTime"style"width: 100%"><el-table-columnprop"name"label"姓名"width"180"></el-table-column><el-table-columnprop&quo…...

编程日记 2023/11/7 4:01:32

APP攻防--ADB基础

进入app包 先使用 adb devices查看链接状态 手机连接成功的 adb shell 获取到手机的一个shell 此时想进入app包时没有权限的&#xff0c;APP包一般在data/data/下。没有执行权限&#xff0c;如图 Permission denied 权限被拒绝 此时需要手机root&#xff0c;root后输入 su …...

编程日记 2023/11/7 4:00:31

【Linux】第十站：git和gdb的基本使用

文章目录 一、git的基本操作1.gitee新建仓库注意事项2.git的安装3.git的克隆4.git的add5.git的commit6.git的push7.git log8.git status9. .gitignore 二、Linux调试器---gdb1.背景2.gdb安装、进入与退出3.list/l4.r/run运行程序5. break/b 打断点6.info/i b 查看断点7.delete/…...

编程日记 2023/11/7 3:59:30

Single Image Haze Removal Using Dark Channel Prior(暗通道先验)

去雾算法都会依赖于很强的先验以及假设&#xff0c;并结合相应的物理模型&#xff0c;完成去雾过程。本文作者何凯明及其团队通过大量的无雾图像和有雾图像&#xff0c;归纳总结出无雾图像在其对应的暗通道图像上具有极低的强度值&#xff08;趋近于0&#xff09;&#xff0c;并…...

编程日记 2023/11/7 3:58:29

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/2/9 15:41:39

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/2/2 16:55:46

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2026/1/9 3:08:54

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/10/10 9:07:27

raid存储技术

1. 存储技术概念 数据存储架构是对数据存储方式、存储设备及相关组件的组织和规划&#xff0c;涵盖存储系统的布局、数据存储策略等&#xff0c;它明确数据如何存储、管理与访问&#xff0c;为数据的安全、高效使用提供支撑。 由计算机中一组存储设备、控制部件和管理信息调度的…...

编程新知 2025/12/15 13:40:52