如何让元素在页面中完美居中?看这篇文章就够了!

news2024/12/25 0:36:48

  

 🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

 ⭐  专栏简介

 📘  文章引言

一、背景

二、实现方式

利用定位+margin:auto

利用定位+margin:负值

利用定位+transform

table布局

flex弹性布局

grid网格布局

小结

三、总结

内联元素居中布局

块级元素居中布局

⭐  写在最后


 ⭐  专栏简介

        欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。

        同时,我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进,前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术,使你能够站在前沿,与时俱进。通过掌握最新的前端技术,你将能够在竞争激烈的Web开发领域中有更大的竞争力。

 📘  文章引言

一、背景

在开发中经常遇到这个问题,即让某个元素的内容在水平和垂直方向上都居中,内容不仅限于文字,可能是图片或其他元素

居中是一个非常基础但又是非常重要的应用场景,实现居中的方法存在很多,可以将这些方法分成两个大类:

  • 居中元素(子元素)的宽高已知
  • 居中元素宽高未知

二、实现方式

实现元素水平垂直居中的方式:

  • 利用定位+margin:auto

  • 利用定位+margin:负值

  • 利用定位+transform

  • table布局

  • flex布局

  • grid布局

利用定位+margin:auto

先上代码:

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

父级设置为相对定位,子级绝对定位 ,并且四个定位属性的值都设置了0,那么这时候如果子级没有设置宽高,则会被拉开到和父级一样宽高

这里子元素设置了宽高,所以宽高会按照我们的设置来显示,但是实际上子级的虚拟占位已经撑满了整个父级,这时候再给它一个margin:auto它就可以上下左右都居中了

利用定位+margin:负值

绝大多数情况下,设置父元素为相对定位, 子元素移动自身50%实现水平垂直居中

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

整个实现思路如下图所示:

  • 初始位置为方块1的位置
  • 当设置left、top为50%的时候,内部子元素为方块2的位置
  • 设置margin为负数时,使内部子元素到方块3的位置,即中间位置

这种方案不要求父元素的高度,也就是即使父元素的高度变化了,仍然可以保持在父元素的垂直居中位置,水平方向上是一样的操作

但是该方案需要知道子元素自身的宽高,但是我们可以通过下面transform属性进行移动

利用定位+transform

实现代码如下:

 
<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
  transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>
translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%

这种方法其实和最上面被否定掉的margin负值用法一样,可以说是margin负值的替代方案,并不需要知道自身元素的宽高

table布局

设置父元素为display:table-cell,子元素设置 display: inline-block。利用verticaltext-align可以让所有的行内块级元素水平垂直居中

<style>
    .father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

flex弹性布局

还是看看实现的整体代码:

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

css3中了flex布局,可以非常简单实现垂直水平居中

这里可以简单看看flex布局的关键属性作用:

  • display: flex时,表示该容器内部的元素将按照flex进行布局

  • align-items: center表示这些元素将相对于本容器水平居中

  • justify-content: center也是同样的道理垂直居中

grid网格布局

<style>
    .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }
</style>
<div class="father">
    <div class="son"></div>
</div>

这里看到,gird网格布局和flex弹性布局都简单粗暴

小结

上述方法中,不知道元素宽高大小仍能实现水平垂直居中的方法有:

  • 利用定位+margin:auto

  • 利用定位+transform

  • 利用定位+margin:负值

  • flex布局

  • grid布局

三、总结

根据元素标签的性质,可以分为:

  • 内联元素居中布局
  • 块级元素居中布局

内联元素居中布局

水平居中

  • 行内元素可设置:text-align: center
  • flex布局设置父元素:display: flex; justify-content: center

垂直居中

  • 单行文本父元素确认高度:height === line-height
  • 多行文本父元素确认高度:disaply: table-cell; vertical-align: middle

块级元素居中布局

水平居中

  • 定宽: margin: 0 auto
  • 绝对定位+left:50%+margin:负自身一半

垂直居中

  • position: absolute设置left、top、margin-left、margin-top(定高)
  • display: table-cell
  • transform: translate(x, y)
  • flex(不定高,不定宽)
  • grid(不定高,不定宽),兼容性相对比较差

 

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

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

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

相关文章

Python爬虫防止被封的方法:动态代理ip

目录 前言 一、为什么需要使用动态IP代理 1.网站反爬虫机制 2.突破本地IP限制 3.获取更多数据 二、Python爬虫动态IP代理的实现方法 1.使用第三方库 2.使用爬虫框架 三、预防被封的方法 1.代理池管理 2.请求间隔设置 3.使用多个代理 总结 前言 在进行网站爬取时&…

四周年,创始人李亚飞写给 ShowMeBug 用户的一封信

见信如晤。 此刻&#xff0c;我心怀感激&#xff0c;感谢您对 ShowMeBug 的支持和鼓励。ShowMeBug 在这几年能够在剧烈竞争的环境中存活下来&#xff0c;证明了大家对我们的认可&#xff0c;在此由衷感谢大家。 今天我怀着前所未有的满足感&#xff0c;想分享下 ShowMeBug 成…

共享购模式:重新定义电商购物体验

在当今的电商市场&#xff0c;消费者对购物体验的需求日益增长&#xff0c;他们不再满足于传统的电商模式。为此&#xff0c;共享购模式应运而生&#xff0c;这种创新模式将线下实体商业与线上虚拟商城相结合&#xff0c;为用户带来全新的购物体验。本文将详细讲解共享购模式的…

Mac版好用的Git客户端 Fork 免激活

Fork是一款强大的Git客户端软件&#xff0c;在Mac和Windows操作系统上都可以使用。汇集了众多先进的功能和工具&#xff0c;可以帮助用户更方便地管理和控制Git仓库。 Fork的界面简洁直观&#xff0c;易于使用。它提供了许多高级的Git功能&#xff0c;如分支管理、合并、提交、…

基于机器视觉的手势检测和识别算法 计算机竞赛

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的手势检测与识别算法 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng…

双十一电视盒子哪个好?数码小编揭晓2023最新电视盒子品牌排行榜

很多消费者反馈电视盒子用不了多久就死机、卡顿&#xff0c;广告超级多&#xff0c;不知道双十一买电视盒子要怎么选择&#xff0c;电视盒子哪个好&#xff1f;小编今天来给大家揭晓一下业内最新发布的电视盒子品牌排行榜&#xff0c;看看入围的都有哪些&#xff1a; 一、泰捷W…

freeRTOS学习day3-任务的挂起和恢复

任务挂起函数 vTaskSuspend(Task1_Handler); 任务恢复函数 vTaskResume(Task1_Handler); 任务挂起后 进入就绪态 会停止运行 实验&#xff1a;创建三个任务 任务一打印 任务二打印 任务三控制任务一的挂起和恢复 #include "sys.h" #include "delay.h&quo…

2024线性代数复习——矩阵代数

相似矩阵&#xff1a;存在可逆矩阵 P P P&#xff0c;使得 P − 1 A P B P^{-1} A PB P−1APB&#xff0c;则称矩阵 A A A&#xff0c; B B B 相似&#xff0c;特征值相等。注意只有相似矩阵 B B B 是对角阵&#xff0c;我们才说它是可以相似对角化的。 A A A 可以相似对角…

渲染对电脑伤害多大?怎么避免对本地电脑的损害?

长时间的渲染会对电脑造成伤害吗&#xff1f;我相信这对于许多从事动画和效果图设计的人来说是一个担忧。本文将详细探讨渲染可能对电脑造成的潜在影响&#xff0c;并提供一些避免这些问题的方法。 1.渲染对电脑伤害多大&#xff1f; 我们都知道&#xff0c;在渲染项目时&…

职场必看!性能测试响应很慢怎么排查?

大多数的性能测试工作人员分为以下三个阶段&#xff1a; 1、出了问题看资源&#xff0c;资源占用如果很高&#xff0c;报以窃喜的心态&#xff0c;恩&#xff0c;发现了&#xff0c;原理是资源瓶颈。 2、资源没有出现瓶颈&#xff0c;通过一些技术手段分析&#xff0c;发现是…

解锁娜扎副驾,年轻人的第一台车就选哪吒AYA

最近“娜扎哪吒”的CP组合可谓刷屏汽车圈,一个是高颜值、有气质的当红演员,一个是有实力、有能力的低调“理工男”,哪吒汽车和娜扎的携手,让不少朋友情不自禁地嗑起了CP,也开始更关注哪吒汽车的产品。 除了刚刚发布的“大气舒适新标杆”哪吒X,入手门槛低、颜值够高、智能体验远…

什么是KEIL的微库(microlib)?

就是下面这个选项&#xff1a; Microlib是什么 Microlib也是一个C语言的库。它是为了小内存的嵌入式系统设计的&#xff0c;用于代替标准C语言库&#xff0c;但是Microlib对标准C语言库进行了裁剪和优化&#xff0c;因此并不完全兼容标准C语言库。Microlib相比于标准库&#x…

前端伪进度条实现(仿antd message使用react组件静态方法)

文章目录 背景实现方法(一) react组件静态方法(二) 通过静态方法改变组件的状态(三) 指定进度条的步幅规则(四) 成功和失败的状态改变1. 成功2. 失败 (五) 组件消失(六) 背景遮罩 最终实现及代码组件代码模拟调用进度条组件的代码 可能遇到的问题静态方法调不到/报错组件渲染两…

23款奔驰GLC260L升级原厂 360全景影像 新款透明底盘

360全景影像影像系统提升行车时的便利&#xff0c;不管是新手或是老司机都将是一个不错的配置&#xff0c;无论是在倒车&#xff0c;挪车以及拐弯转角的时候都能及时关注车辆所处的环境状况&#xff0c;避免盲区事故发生&#xff0c;提升行车出入安全性。Xjh15863 360全景影像…

【超参数研究01】使用网格搜索优化超参数

一、说明 在神经网络训练中&#xff0c;超参数也是需要优化的&#xff0c;然而在超参数较多&#xff08;大于3个&#xff09;后&#xff0c;如果用穷举的&#xff0c;或是通过经验约摸实现就显得费时费力&#xff0c;无论如何&#xff0c;这是需要研究、规范、整合的要点&#…

漏洞复现--用友U8-Cloud upload.jsp任意文件上传

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

分享一下怎么做多门店商城系统

随着互联网的快速发展&#xff0c;传统实体店面临着巨大的挑战。为了更好地适应市场变化&#xff0c;提高竞争力&#xff0c;多门店商城系统应运而生。这种新型的商业模式&#xff0c;旨在通过线上线下融合&#xff0c;实现门店之间的互联互通&#xff0c;提高运营效率&#xf…

云尘靶场-铁三域控

第一次 通过vpn链接 然后fscan扫描c段 扫描出来三个ip存活 并且141存在永恒之蓝 我们看看能不能直接复现 按照原本的设置发现 提示这里需要通过32位来进行 那我们开始设置 利用MS17-010渗透win7&#xff08;32位&#xff09;_利用ms17-010渗透win7(32位)-CSDN博客 https:…

外汇天眼:MT4白标与MT5,谁更适合如今的外汇市场?

2017年4月&#xff0c;外汇市场因迈达克的官宣闹得沸沸扬扬。 俄罗斯知名软件提供商迈达克&#xff08;MetaQuotes&#xff09;宣布停止出售旗下产品MT4的主标业务&#xff0c;意在淘汰MT4软件&#xff0c;转而主推MT5平台。 对于计划成为经纪商的人来说&#xff0c;是选择快速…

个人记账理财软件 Money Pro mac中文版软件介绍

Money Pro for mac是一款综合性高的理财工具&#xff0c;Money Pro是一套能够协同工作的工具&#xff0c;可用来追踪账户、管理账单以及制作预算&#xff0c;您可以为每个时间段设置不同的预算限值。财务一切尽在掌控之中。 Money Pro for mac软件介绍 Money Pro for mac提供一…