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

如何使一个盒子水平垂直居中（常用的）

news 文章来源：https://blog.csdn.net/karlaofsky/article/details/140262462 2025/2/12 19:07:10

目录

1. 使用Flex布局

 2. 使用Grid布局

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

 4.绝对定位+外边距 auto 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)

1. 使用Flex布局

如何实现：

在父元素上添加：

            display: flex;

            align-items: center;

            justify-content: center;

<style>* {padding: 0;margin: 0;}.parent {display: flex;/* 水平居中 */justify-content: center; /* 垂直居中 */align-items: center;width: 500px;height: 500px;background-color: aqua;}.child {width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

 2. 使用Grid布局

 如何实现：

在父元素上添加：

        display: grid;

        place-items: center;

    <style>* {padding: 0;margin: 0;}.parent {display: grid;/* 水平和垂直方向都居中对齐 */place-items: center;width: 500px;height: 500px;background-color: aqua;}.child {width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。

如何实现：

在父元素上添加：

         position: relative;

在子元素上添加：

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -100px;  //子元素高度的一半

            margin-left: -100px;  //子元素宽度的一半

 

    <style>* {padding: 0;margin: 0;}.parent {position: relative;width: 500px;height: 500px;background-color: aqua;}.child {position: absolute;top: 50%;left: 50%;margin-top: -100px;//子元素高度的一半margin-left: -100px;//子元素宽度的一半width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

 4.绝对定位+外边距 auto 

将盒子的上下左右定位全部设置为0，同时设置外边距自适应

如何实现：

在父元素上添加：

         position: relative;

在子元素上添加：

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

    <style>* {padding: 0;margin: 0;}.parent {position: relative;width: 500px;height: 500px;background-color: aqua;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)

使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小

如何实现：

在父元素上添加：

         position: relative;

在子元素上添加：

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

   <style>* {padding: 0;margin: 0;}.parent {position: relative;width: 500px;height: 500px;background-color: aqua;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 200px;height: 200px;background-color: pink;}</style>
<body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

 

 

相关文章：

如何使一个盒子水平垂直居中（常用的）

目录 1. 使用Flex布局 2. 使用Grid布局 3.绝对定位 负外边距 (必须知晓盒子的具体大小) 4.绝对定位外边距 auto 5.绝对定位 transform (无须知晓盒子的具体大小) 1. 使用Flex布局 如何实现&#xff1a; 在父元素上添加&#xff1a; display: flex; align-items: center…...

编程日记 2024/7/12 21:26:05

安全防御-用户认证综合实验

一、拓扑图 二、实验要求 1、DMZ区的服务器&#xff0c;办公区仅能在办公时间内&#xff08;9:00-18:00&#xff09;可以访问&#xff0c;生产区设备全天都是可以访问的 2、生产区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网 3、办公区设备10.0.2.20不允许访…...

编程日记 2024/7/12 21:23:01

uniapp安卓离线打包配置scheme url

uniapp安卓离线打包配置scheme url 打开 AndroidManifest.xml 搜索 scheme 填入 即可 <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android" package"uni.UNI979A394…...

编程日记 2024/7/12 21:18:57

C++ STL std::lexicographical_compare用法和实现

一&#xff1a;功能 按字典顺序比较两个序列&#xff0c;判断第一个序列是否小于(或大于)第二个序列 二&#xff1a;用法 #include <compare> #include <vector> #include <string> #include <algorithm> #include <iostream> #include <fo…...

编程日记 2024/7/12 21:17:56

ORM Bee,如何使用Oracle的TO_DATE函数?

ORM Bee,如何使用Oracle的TO_DATE函数? 在Bee V2.4.0,可以这样使用: LocaldatetimeTable selectBeannew LocaldatetimeTable();Condition conditionBF.getCondition();condition.op("localdatetime", Op.ge, new TO_DATE("2024-07-08", "YYYY-MM-DD&…...

编程日记 2024/7/12 21:13:50

HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子

自己复习前端基础&#xff0c;仅用于记忆&#xff0c;初学者不太适合 示例代码 - HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initi…...

编程日记 2024/7/12 21:11:48

C++：创建线程

在C中创建线程&#xff0c;最直接的方式是使用C11标准引入的<thread>库。这个库提供了std::thread类&#xff0c;使得线程的创建和管理变得简单直接。 以下是一个简单的示例&#xff0c;展示了如何在C中使用std::thread来创建和启动线程&#xff1a; 示例1&#xff1a;…...

编程日记 2024/7/12 21:10:47

python如何查看类的函数

Python非常方便&#xff0c;它不需要用户查询文档&#xff0c;只需掌握如下两个帮助函数&#xff0c;即可查看Python中的所有函数&#xff08;方法&#xff09;以及它们的用法和功能&#xff1a; dir()&#xff1a;列出指定类或模块包含的全部内容&#xff08;包括函数、方法、…...

编程日记 2024/7/12 21:09:46

P6. 对局列表和排行榜功能

P6. 对局列表和排行榜功能 0 概述1 对局列表功能1.1 分页配置1.2 后端按页获取对局列表接口1.3 前端展示传回来的对局列表1.4 录像回放功能1.4.1 录像回放的流程1.4.2 录像回放的实现 1.5 前端分页展示 2 排行榜功能2.1 排行榜的实现 0 概述 本节主要介绍了如何实现对局列表和…...

编程日记 2024/7/12 21:08:46

uniapp easycom组件冲突

提示信息 ​easycom组件冲突&#xff1a;[/components/uni-icons/uni-icons.vue,/uni_modules/uni-icons/components/uni-icons/uni-icons.vue]​ 问题描述 老项目&#xff0c;在uniapp插件商城导入了一个新的uniapp官方开发的组件》uni-data-picker 数据驱动的picker选择器 …...

编程日记 2024/7/12 21:02:39

总结24个Python接单赚钱平台与详细教程，兼职月入5000+

如果说当下什么编程语言最靠谱或者比较适合搞副业&#xff1f; 答案肯定100%是&#xff1a;Python。 python是所有语法中最简单易上手的语言&#xff0c;不需要特别的的英语词汇量&#xff0c;逻辑思维也不需要很差就能上手。而且学会了之后就能编写代码爬取各种数据&#xf…...

编程日记 2024/7/12 20:58:34

macOS 的电源适配器设置

在 macOS 的电源适配器设置中&#xff0c;有四个选项&#xff0c;每个选项都有特定的功能&#xff1a; Prevent your Mac from automatically sleeping when the display is off&#xff08;当显示屏关闭时&#xff0c;防止你的 Mac 自动进入睡眠状态&#xff09;&#xff1a;…...

编程日记 2024/7/12 20:54:31

视觉SLAM与定位之一前端特征点及匹配

视觉SLAM中的特征点及匹配 参考文章或链接特征点性能的评估传统特征点和描述子&#xff08;仅特征点或者特征点描述子&#xff09;传统描述子 基于深度学习的特征点基于深度学习的描述子基于深度学习的特征点描述子特征匹配 参考文章或链接 Image Matching from Handcrafted t…...

编程日记 2024/7/12 20:49:25

开源项目的认识理解

目录 开源项目有哪些机遇与挑战&#xff1f; 1.开源项目的发展趋势 2.开源的经验分享&#xff08;向大佬请教与上网查询&#xff09; 3.开源项目的挑战 开源项目有哪些机遇与挑战&#xff1f; 1.开源项目的发展趋势 1. 持续增长与普及 - 开源项目将继续增长&#xff0c…...

编程日记 2024/7/12 20:48:24

37.哀家要长脑子了！--层序遍历

gongmi层序遍历模板 vector<vector<int>> levelOrder(TreeNode *root){queue<TreeNode*> que;vector<vector<int>> res;if(root ! nullptr)que.push(root);while(!que.empty()){int size que.size();vector<int> storey;for(int i 0; i …...

编程日记 2024/7/12 20:46:23

【从零开始AI绘画6】StableDiffusionWebUI拓展的安装方法以及推荐的几个拓展

这里写自定义目录标题 拓展Extention安装方法&#xff08;以双语对照插件为例&#xff09;1、WebUI内置的下载方式&#xff08;推荐&#xff09;2、git clone安装&#xff08;更推荐&#xff09;3、github下载安装包后解压&#xff08;不推荐&#xff09; 强力推荐安装的几个插…...

编程日记 2024/7/12 20:44:20

HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证 通过在元素中使用属性的方法&#xff0c;该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性说明required输入内容是否不为空pattern输入的内容是否符合指定格式min、max输入的数值是否在min~max范围step判断…...

编程日记 2024/7/12 20:36:10

SpringMVC系列九: 数据格式化与验证及国际化

SpringMVC 数据格式化基本介绍基本数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试 特殊数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试 验证及国际化概述应用实例代码实现注意事项和使用细节 注解的结合使用先看一个问题解决问题 数据类型转换…...

编程日记 2024/7/12 20:35:09

判断链表中是否有环（力扣141.环形链表）

这道题要用到快慢指针。 先解释一下什么是快慢指针。 快慢指针有两个指针&#xff0c;走得慢的是慢指针&#xff0c;走得快的是快指针。 在这道题&#xff0c;我们规定慢指针一次走一步&#xff0c;快指针一次走2步。 如果该链表有环&#xff0c;快慢指针最终会在环中相遇&a…...

编程日记 2024/7/12 20:31:04

Kubernetes基于helm部署jenkins

Kubernetes基于helm安装jenkins jenkins支持war包、docker镜像、系统安装包、helm安装等。在Kubernetes上使用Helm安装Jenkins可以简化安装和管理Jenkins的过程。同时借助Kubernetes&#xff0c;jenkins可以实现工作节点的动态调用伸缩&#xff0c;更好的提高资源利用率。通过…...

编程日记 2024/7/12 20:29:02

【Linux】vim详解

1.什么是vi/vim? 简单来说&#xff0c;vi是老式的文本编辑器&#xff0c;不过功能已经很齐全了&#xff0c;但是还是有可以进步的地方。vim则可以说是程序开发者的一项很好用的工具&#xff0c;就连 vim的官方网站&#xff08; http://www.vim.org&#xff09;自己也说vim是一…...

编程日记 2024/7/12 20:23:58

Android11 mtk 第二次设置壁纸，锁屏壁纸不变的问题

1、情景：近日测试人员发现第一次更换壁纸后，主屏幕壁纸和锁屏壁纸均会改变；但第二次更换壁纸后，主屏幕壁纸会改变而锁屏壁纸不会改变。 2、要求：主屏幕壁纸和锁屏壁纸军改变 3、解决 路径：****\frameworks\base\services\core\java\com\android\server\wallpaper\Wallp…...

编程日记 2024/7/12 20:22:57

Java学习路线

目录 友情提醒第一章、Java基础1.1&#xff09;第一部分&#xff1a;Java 入门1.2&#xff09;第二部分&#xff1a;Java数组1.3&#xff09;第三部分&#xff1a;Java面向对象1.4&#xff09;第四部分&#xff1a;常用工具类1.5&#xff09;第五部分&#xff1a;集合体系1.6&a…...

编程日记 2024/7/12 20:20:55

java 实现人脸检测

1. 安装必要的库 确保你已经安装了JPEG库、BLAS和LAPACK库。在Ubuntu或Debian系统上&#xff0c;可以使用以下命令安装&#xff1a; sudo apt-get update sudo apt-get install libjpeg-dev libblas-dev liblapack-dev 在CentOS或Fedora系统上&#xff0c;可以使用以下命令安…...

编程日记 2024/7/12 20:14:50

VSCode神仙插件——Codeium (AI编程助手)

1、安装&登录插件 安装过程中会让你登录Codeium账户&#xff0c;可以通过Google账户登录&#xff0c;或者可以注册一个Codeium账户&#xff08;如果没有弹出让你登录账户的界面&#xff0c;可以等安装结束后在右下角找到登录的地方&#xff09; 右下角显示如下图所示&#…...

编程日记 2024/7/12 20:09:47

css文本划线效果（text-decoration相关属性详解）

/* 样式类型*/text-decoration: underline;/* 下划线颜色 */text-decoration-color: #ffcb15;/* 超出基线的字符不会被截断 */text-decoration-skip-ink: none;/*下划线厚度 */text-decoration-thickness: 5px;/* 与其原始位置的偏移距离 */text-underline-offset: 0;1. text-u…...

编程日记 2024/7/12 20:08:46

《Windows API每日一练》8.5 listbox控件

列表框是将一批文本字符串显示在一个具有滚动功能的方框中的控件。通过发送消息到列表框的窗口过程&#xff0c;程序可以添加或删除列表中的字符串。当列表框中的一个项目被选中时&#xff0c;列表框控件便发送 WM_COMMAND消息到其父窗口。然后父窗口确定哪个项目被选中。 本节…...

编程日记 2024/7/12 20:07:45

使用Node.js 框架（ Express.js）来创建一个简单的 API 端点

文章目录 使用Node.js 框架&#xff08; Express.js&#xff09;来创建一个简单的 API 端点什么是express安装修改代码 express 自动刷新 使用Node.js 框架&#xff08; Express.js&#xff09;来创建一个简单的 API 端点 什么是express Express 是一个保持最小规模的灵活的 …...

编程日记 2024/7/12 20:04:40

企业服务行业CRM解决方案

企业服务行业CRM解决方案 强大的功能满足企业服务行业对客户管理、业务管理等方面的真实需求&#xff1b; 细分企业服务行业的不同领域&#xff0c;为不同业务场景提供个性化配置&#xff1b; 打通钉钉、企业微信等平台&#xff0c;降低企业使用CRM门槛&#xff0c;提供高性…...

编程日记 2024/7/12 20:03:39

服务器怎么进PE系统？

服务器进PE是指将服务器的操作系统切换到预安装环境&#xff08;Pre-Installation Environment&#xff09;的状态。在PE环境下&#xff0c;可以进行一些系统管理和故障排除的操作。在进入PE&#xff08;Preinstall Environment&#xff09;之前&#xff0c;首先需要确保你的服…...

编程日记 2024/7/12 20:02:38

保定做网站的公司/免费发布信息的平台

作为一名产品经理&#xff0c;最奢侈的愿望是什么&#xff1f;“有一个自己能控制的团队去实现心目中的产品”&#xff0c;应该不仅仅是我有这个想法吧。按照比较流行的说法&#xff0c;产品经理是只负责产品规划与管理、不直接负责团队管理的“经理”&#xff0c;但却身负推动…...

编程日记 2025/2/12 18:52:23

wordpress相册分类/seo是什么字

python 的 flask pymysql操作Mysql数据库的实例安装flask-sqlalchemy、pymysql模块pip install flask-sqlalchemy pymysql### Flask-SQLAlchemy的介绍1. ORM&#xff1a;Object Relationship Mapping(模型关系映射)。2. flask-sqlalchemy是一套ORM框架。3. ORM的好处&#xff…...

编程日记 2025/2/12 18:48:21

政府网站建设经验交流材料/百度网址收录入口

3.set_difference 功能描述&#xff1a;求两个集合的差集 函数原型set_difference(iterator beg1,iterator end1,iterator beg2,iterator end2,iterator dest); //求两个集合的差集 //注意&#xff1a;两个集合必须是有序序列 //beg1容器1开始迭代器 //end1容器1结束迭代器 /…...

编程日记 2025/2/12 15:23:24

网站页面多少/班级优化大师官网登录

as3中的根即顶级容器是stage&#xff0c;stage是Stage类的唯一实例&#xff0c;当你创建一个文档时&#xff0c;就创建了stage实例。上节提到的root就是stage下的一个可视实例。由于stage和root都是容器&#xff0c;所以当在时间轴写代码时&#xff0c;可以有2个选择&#xff0…...

编程日记 2025/2/12 14:42:56

工业设计是冷门专业吗/seo推广百度百科

1. font-face是什么? CSS3中的一个模块, 使用它, 我们可以在web应用中使用自己喜欢的字体.2. 基本使用方法 font-face {font-family: yourWebFontName; // 自定义的字体名称src: url(../**/**) format(truetype); // url(...)字体路径 format()见下font-weight:…...

编程日记 2025/2/12 14:13:37

沈阳 网站建设/网站网页设计

前言&#xff1a;打脸了&#xff0c;前脚刚说过要跟Servlet正式告别。结果最近的面试被问到了同一个Servlet可不可以被映射到多个URL上&#xff0c;也就是如何用一个Servlet实现多个功能。 前置知识&#xff1a; Servlet容器如何处理请求资源路径&#xff1f; 1、这个地址 ht…...

编程日记 2025/2/12 11:42:56