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

实现水平垂直居中的十种方式

news 2025/10/31 16:08:50

本文节选自我的博客：实现水平垂直居中的十种方式

  • 💖 作者简介：大家好，我是MilesChen，偏前端的全栈开发者。
  • 📝 CSDN主页：爱吃糖的猫🔥
  • 📣 我的博客：爱吃糖的猫
  • 📚 Github主页: MilesChen
  • 🎉 支持我：点赞👍+收藏⭐️+留言📝
  • 💬介绍：The mixture of WEB+DeepLearning+Iot+anything🍁

前言

实现水平垂直居中是一道经典的面试题，如果你能侃侃而谈这十种实现水平垂直居中的方式，一定会令面试官眼前一亮。按照实现方式的不同可粗略分为三类：绝对定位实现的四种、flex实现的两种、其他四种。

绝对定位实现的四种

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中</title><style>/* 公共代码 */.father {border: 1px solid red;width: 300px;height: 300px;}.box {width: 100px;height: 100px;  background: green;  }/* 公共代码 *//* 方法一 absolute+负margin  常用、兼容性好。缺点是要知道子元素的宽高 */.father {position: relative;}.box {position: absolute;;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}/* 方法二 absolute + margin auto  兼容性好。缺点是要知道子元素的宽高*//* .father {position: relative;}.box {position: absolute;;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} *//* 方法三 absolute + calc  兼容性依赖calc的兼容性，缺点是要知道子元素的宽高*//* .father {position: relative;}.box {position: absolute;;top: calc(50% - 50px);left: calc(50% - 50px);} *//* 方法四 absolute + transform 兼容性依赖translate2d的兼容性，不需要知道子元素的宽高 *//* .father {position: relative;}.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} */</style>
</head>
<body><div class="father"><div class="box">content</div></div>    
</body>
</html>

flex实现的两种

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中</title><style>/* 公共代码 */.father {border: 1px solid red;width: 300px;height: 300px;}.box {width: 100px;height: 100px;  background: green;    }/* 公共代码 *//* 方法5 flex 目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况 */.father {display: flex;justify-content: center;align-items: center;}/* 方法6 flex 的另外一种写法*//* .father {display: flex;}.box {margin: auto;} */</style>
</head>
<body><div class="father"><div class="box">content</div></div>    
</body>
</html>

其他四种

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中</title><style>/* 公共代码 */.father {border: 1px solid red;width: 300px;height: 300px;}.box {width: 100px;height: 100px;  background: green;    }/* 公共代码 *//* 方法7 行内块 将父元素设置text-align: center；line-height: 300px;;子标签display: inline-block;vertical-align: middle;line-height: initial;*//* 适用于行内块，利用了行内块和行内标签具有文本属性的特点 *//* .father {line-height: 300px;text-align: center;}.box {font-size: 16px;display: inline-block;vertical-align: middle;line-height: initial;} *//* 方法8 grid 但兼容性不如flex，不推荐使用 *//* .father {display: grid;}.box {align-self: center;justify-self: center;} *//* 方法9 css-table  css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中*//* .father {display: table-cell;text-align: center;vertical-align: middle;}.box {display: inline-block;} */</style>
</head>
<body><div class="father"><div class="box">content</div></div>    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中</title><style>/* 公共代码 */.father {border: 1px solid red;width: 300px;height: 300px;}.box {width: 100px;height: 100px;  background: green;    }/* 公共代码 *//* 方法10 table 天然支持垂直居中，设置水平居中即可；缺点是 复杂；table本身就不适合做居中布局的*/</style>
</head>
<body><table class="father"><tr align="center"><td><div class="box">content</div></td></tr></table>
</body>
</html>

总结

绝对定位的四种，前三种要知道子元素的宽高

  1. absolute+负margin 常用、兼容性好。top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;
  2. absolute + margin auto；兼容性好。top: 0;left: 0;right: 0;bottom: 0;margin: auto;
  3. absolute + calc；兼容性依赖calc的兼容性；top: calc(50% - 50px);left: calc(50% - 50px);
  4. absolute + transform； 兼容性依赖translate2d；top: 50%;left: 50%;transform: translate(-50%, -50%);

flex两种：目前在移动端已经完全兼容flex，PC端需要看业务的兼容性情况

  1. 父元素设置display: flex;justify-content: center;align-items: center;即可
  2. 父元素设置display: flex;子元素margin: auto;

其他四种写法：

  1. 行内块；将父元素设置text-align: center；line-height: 300px(撑满);子标签display: inline-block;vertical-align: middle;line-height: initial; （控制好行高）利用了行内块和行内标签具有文本属性的特点
  2. grid ；但兼容性不如flex，子标签align-self: center;justify-self: center;
  3. css-table ：css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中display: table-cell; text-align: center;vertical-align: middle;
  4. table标签；table天然支持垂直居中，设置水平居中即可；缺点是 复杂；table本身就不适合做居中布局的

感谢小伙伴们的耐心观看，本文为笔者个人学习记录，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！

相关文章：

实现水平垂直居中的十种方式

本文节选自我的博客&#xff1a;实现水平垂直居中的十种方式 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是MilesChen&#xff0c;偏前端的全栈开发者。&#x1f4dd; CSDN主页&#xff1a;爱吃糖的猫&#x1f525;&#x1f4e3; 我的博客&#xff1a;爱吃糖的猫&…...

编程日记 2023/10/2 17:37:52

头条号热点采集工具-头条号热文采集软件

有一种魔法&#xff0c;能让信息传遍大地&#xff0c;让新闻在互联网上迅速传播&#xff0c;引发关注和讨论&#xff0c;那就是头条热点。无论你是一名自媒体创作者&#xff0c;还是一个信息追踪者&#xff0c;头条热点都是你不能忽视的宝贵资源。然而&#xff0c;如何获取这些…...

编程日记 2023/10/2 17:35:50

了解”变分下界“

“变分下界”&#xff1a;在变分推断中&#xff0c;我们试图找到一个近似概率分布q(x)来逼近真实的概率分布p(x)。变分下界是一种用于评估近似概率分布质量的指标&#xff0c;通常用来求解最优的近似分布。它的计算涉及到对概率分布的积分或期望的估计...

编程日记 2023/10/2 17:34:50

Andriod 简单控件

目录 一、文本显示1.1 设置文本内容1.2 设置文本大小1.3 设置文本颜色 二、视图基础2.1 设置视图宽高2.2 设置视图间距2.3 设置视图对齐方式 三、常用布局3.1 线性布局LinearLayout3.2 相对布局RelativeLayout3.3 网格布局GridLayout3.4 滚动视图ScrollView 四、按钮触控4.1 按…...

编程日记 2023/10/2 17:33:49

Substructure‑aware subgraph reasoning for inductive relation prediction

摘要 关系预测的目的是推断知识图中实体之间缺失的关系，其中归纳关系预测因其适用于新兴实体的有效性而广受欢迎。大多数现有方法学习逻辑组合规则或利用子图来预测缺失关系。尽管在性能方面已经取得了很大的进展，但目前的模型仍然不是最优的，因为它们捕获拓扑信息的能力有…...

编程日记 2023/10/2 17:31:47

古诗词学习鉴赏APP设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

编程日记 2023/10/2 17:30:46

深度学习与python theano

文章目录 前言1.人工神经网络2.计算机神经网络3.反向传播4.梯度下降-cost 函数1.一维2.二维3.局部最优4.迁移学习 5. theano-GPU-CPU theano介绍1.安装2.基本用法1.回归2.分类 3.function用法4.shared 变量5.activation function6.Layer层7.regression 回归例子8.classificatio…...

编程日记 2023/10/2 17:29:45

【算法优选】双指针专题——贰

文章目录 &#x1f60e;前言&#x1f332;[快乐数](https://leetcode.cn/problems/happy-number/)&#x1f6a9;题目描述&#x1f6a9;题⽬分析&#xff1a;&#x1f6a9;算法思路&#xff1a;&#x1f6a9;代码实现&#xff1a; &#x1f38b;[盛水最多的容器](https://leetco…...

编程日记 2023/10/2 17:28:45

AI智能电话机器人实用吗

近几年&#xff0c;人工智能得到很大的发展&#xff0c;同时语音识别技术的不断完善&#xff0c;很多以语音识别为基础的应用涌现出来&#xff0c;尤其是最近3年&#xff0c;出现了很多智能电话机器人。百度开发者大会上展示了百度智能客服也吸引了很多人对智能电话机器人的兴趣…...

编程日记 2023/10/2 17:27:44

网络爬虫--伪装浏览器

从用户请求的Headers反反爬 在访问某些网站的时候&#xff0c;网站通常会用判断访问是否带有头文件来鉴别该访问是否为爬虫&#xff0c;用来作为反爬取的一种策略。很多网站都会对Headers的User-Agent进行检测&#xff0c;还有一部分网站会对Referer进行检测&#xff08;一些资…...

编程日记 2023/10/2 17:24:41

C/C++程序的内存开辟

前面我们说过&#xff0c;计算机中内存分为三个区域&#xff1a;栈区&#xff0c;堆区&#xff0c;静态区 但是这只是个简化的版本&#xff0c;接下来我们仔细看看内存区域的划分 C/C程序内存分配的几个区域&#xff1a; 栈区&#xff08;stack&#xff09;&#xff1a;在执行…...

编程日记 2023/10/2 17:23:40

【Java 进阶篇】JDBC DriverManager 详解

JDBC&#xff08;Java Database Connectivity&#xff09;是 Java 标准库中用于与数据库进行交互的 API。它允许 Java 应用程序连接到各种不同的数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;执行 SQL 查询和更新操作&#xff0c;以及处理数据库事务。在 JDBC 中&am…...

编程日记 2023/10/2 17:21:38

2023年Linux总结常用命令

1.常用命令 1.1创建文件夹 mkdir -p forever/my 1.2当前目录 pwd 1.3创建文件 touch 1.txt 1.4查看文件 cat 1.txt 1.5复制文件 说明&#xff1a;-r是复制文件夹 cp -r my myCopy 1.6删除文件 说明&#xff1a;-r带包删除文件夹&#xff0c;-f表示强制删除(保存问题) rm -r…...

编程日记 2023/10/2 17:20:37

Mybatis3详解 之 全局配置文件详解

1、全局配置文件 前面我们看到的Mybatis全局文件并没有全部列举出来&#xff0c;所以这一章我们来详细的介绍一遍&#xff0c;Mybatis的全局配置文件并不是很复杂&#xff0c;它的所有元素和代码如下所示&#xff1a; <?xml version"1.0" encoding"UTF-8&…...

编程日记 2023/10/2 17:19:36

力扣-345.反转字符串中的元音字母

Idea 将s中的元音字母存在字符串sv中&#xff0c;并且使用一个数组依次存储元音字母的下标。 然后将字符串sv进行反转&#xff0c;并遍历元音下标数组&#xff0c;将反转后的字符串sv依次插入到源字符串s中 AC Code class Solution { public:string reverseVowels(string s) {…...

编程日记 2023/10/2 17:18:35

643. 子数组最大平均数I（滑动窗口）

目录 一、题目 二、代码 一、题目 643. 子数组最大平均数 I - 力扣&#xff08;LeetCode&#xff09; 二、代码 class Solution { public:double findMaxAverage(vector<int>& nums, int k) {double Average INT_MIN;double sum nums[0];int left 0, right 0…...

编程日记 2023/10/2 17:14:31

Java 21 新特性：虚拟线程（Virtual Threads）

I often take exercise. Why only yesterday I had breakfast in bed. 在Java 21中&#xff0c;引入了虚拟线程&#xff08;Virtual Threads&#xff09;来简化和增强并发性&#xff0c;这使得在Java中编程并发程序更容易、更高效。 虚拟线程&#xff0c;也称为“用户模式线程…...

编程日记 2023/10/2 17:13:30

18scala笔记

Scala2.12 视频地址 1 入门 1.1 发展历史 … 1.2 Scala 和 Java Scala Java 编写代码使用scalac编译成.class字节码文件scala .class文件 执行代码 1.3 特点 1.4 安装 视频地址 注意配置好环境变量 简单代码 1.5 编译文件 编译scala文件会产生两个.class文件 使用java…...

编程日记 2023/10/2 17:10:26

【LeetCode周赛】LeetCode第365场周赛

目录 有序三元组中的最大值 I有序三元组中的最大值 II无限数组的最短子数组 有序三元组中的最大值 I 给你一个下标从 0 开始的整数数组nums。 请你从所有满足 i < j < k 的下标三元组 (i, j, k) 中&#xff0c;找出并返回下标三元组的最大值。如果所有满足条件的三元组的…...

编程日记 2023/10/2 17:08:24

响应式设计的实现方式

一. 什么是响应式 响应式网站设计是一种网络页面设计布局。页面的设计与开发应当根据用户行为以及设备环境&#xff08;系统平台&#xff0c;屏幕尺寸&#xff0c;屏幕定向等&#xff09;进行相应的响应和调整。 响应式网站常见特点&#xff1a; 1. 同时适配PC平板手机。 2…...

编程日记 2023/10/2 17:07:23

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/10/30 10:46:50

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/10/25 12:07:11

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/10/30 6:01:35

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/10/27 1:26:22

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/10/27 6:22:43

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/9/19 10:25:57

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/7/9 17:59:19