位置: IT常识 - 正文

css实现元素居中的5种方法(css元素居中的几种方法)

编辑:rootadmin
css实现元素居中的5种方法

目录

1.最简单的方法

2.利用定位

3.定位配合css3位移

4.弹性盒模型

5.网格布局Grid

推荐整理分享css实现元素居中的5种方法(css元素居中的几种方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css 元素居中,css使元素居中,html让元素居中,css元素居中显示,css元素居中显示,css元素居中对齐,css元素居中margin,css元素居中的几种方法,内容如对您有帮助,希望把文章链接给更多的朋友!

相信大家在面试的时候也会经常碰到css实现元素居中的方法,下面我介绍5中方法给大家,欢迎大家评论区交流

需求:

给定两个元素,这两个元素是父子级关系

并且两个元素的大小都是不确定的,那么这时候如何让子级在父级中上下左右都居中?(暂且设定父级比子级要大一些)

1.最简单的方法

父元素设置display:flex,子元素 margin: auto,代码如下:

<style> .parent { width: 300px; height: 200px; background: rebeccapurple; display: flex; } .child { width: 50px; height: 50px; background: red; margin: auto; } </style> <div class="parent"> <div class="child"></div> </div>

2.利用定位

思路

父级相对定位,子级绝对定位 而四个定位属性的值都设置了0;那么这时候如果子级没有设置宽高,则会被拉开到和父级一样宽高。而现在设置了子级的宽高,所以宽高会按照我们的设置来显示;但是实际上子级的虚拟占位已经撑满了整个父级,这时候再给它一个margin:auto它就可以上下左右都居中了

<style> .parent { width: 300px; height: 200px; background: pink; position: relative; } .child { width: 50px; height: 50px; background: gold; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> <div class="parent"> <div class="child"></div> </div>css实现元素居中的5种方法(css元素居中的几种方法)

3.定位配合css3位移

思路

父级相对定位,子级绝对定位,而top,left这两个属性的如果给百分比;那么这个百分比则是相对于父级的宽高来进行计算的;如果只给定这两个值,则子级的右上角会和父级的中心点对齐,得到下图:这时候则需要进一步操作:css3中的位移属性,则是根据自身来计算百分比的;所以只需要利用这个属性把自身再往左上角各移动50%就可以让子级在父级中上下左右都居中了

<style> .parent { width: 300px; height: 200px; background: rgb(203, 192, 255); position: relative; } .child { width: 50px; height: 50px; background: rgb(221, 201, 73); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style> <div class="parent"> <div class="child"></div> </div>

4.弹性盒模型

css3的功劳,没啥技巧,掌握了弹性盒模型就能掌握这个方法,简单粗暴。

<style> .parent { width: 300px; height: 200px; background: rgb(203, 192, 255); display: flex; justify-content: center; align-items: center; } .child { width: 50px; height: 50px; background: rgb(62, 57, 24); } </style> <div class="parent"> <div class="child"></div> </div>

5.网格布局Grid

这个方法和弹性盒模型一样,简单粗暴,没啥可说的。

<style> .parent { width: 300px; height: 200px; background:green; display: grid; justify-content: center; align-items: center; } .child { width: 50px; height: 50px; background: rebeccapurple; } </style> <div class="parent"> <div class="child"></div> </div>

欢迎在评论区交流。如果文章对你有所帮助,不要忘了点上宝贵的一赞!

我的博客原文:程序员导航

我的编程导航:程序员导航

前端热门面试题:程序员导航

本文链接地址:https://www.jiuchutong.com/zhishi/297805.html 转载请保留说明!

上一篇:博客系统(页面设计)(博客界面模板)

下一篇:(详解错误情况,及解决方法)Vue 数据更新了但页面没有更新的情况(错误解决方法)

  • 土地增值税扣除成本
  • 税务师考试2023年考试时间
  • 预付加油充值卡可以报销吗
  • 企业所得税汇算清缴时间
  • 财务软件属于无形资产的哪一种
  • 防火门属于固定式防火风格
  • 知道含税价,税率,怎么算税金
  • 定期定额自行申报表填表说明
  • 商品和服务税收分类编码
  • 账本一般保存几年就可以销毁2004年的规定
  • 商业银行的下列哪些行为违反了法律规定?给存款大户
  • 应收债权属于非抵押吗
  • 筹建期间有收入怎么办
  • 高温费计税吗
  • 冲销应收账款会引起
  • 无形资产出租后还要摊销吗
  • 企业转让未入账怎么办
  • 个税多交了怎么退税
  • 支付宝手续费由谁承担
  • 开发票税收分类编码怎么选
  • 政府机关开票是普票还是专票
  • 建筑工程公司需要注册商标吗
  • 委托代理出口能否办理退税
  • 财会报告需要哪些证书
  • 企业收取的延期付款利息需要征消费税和增值税
  • 农业合作社出售农产品怎么计税
  • 物业公司的水电工工作职责
  • cpu风扇应该怎么调
  • PHP+Mysql+jQuery实现发布微博程序 php篇
  • macos big sur操作
  • php中strstr
  • 政策性搬迁会计处理案例
  • 贴吧热门评论
  • 房屋装修补偿款 避税
  • 期间损益结转都结转什么
  • 委托贷款账务处理
  • php请求https
  • 企业支付给员工的一次性伤残就业补助金计入哪项费用
  • 水电费分割单会计分录
  • 养老院管理系统er图
  • 浅谈双减背景下的高效课堂
  • 毕业设计-基于组态软件的流量比值过程控制系统设计
  • 残差网络中的残差指的是什么
  • 怎么才能学a1
  • 以摊余成本计量的债权投资与以公允价值计量且其变动
  • 开普票需要公对公吗
  • 金税四期对会计人员要求高吗
  • 做账的好处
  • 不征税收入与免税收入有哪些
  • 营业执照丢失公告后几天可以办注销
  • 贴现的概念及计算公式
  • 再保险业务范围
  • 建筑安装主要做什么
  • 仓库管理人员工资属于什么费用
  • 被代持股份的股东需要负责吗
  • 收到补助款的会计分录
  • 收到发票没付款,能打赢官司吗
  • 预付购买设备款
  • 收到转账支票怎么填
  • 收缩后对数据库有影响吗
  • win7系统怎么运行xp系统的软件
  • win10怎么设置pdf默认打开方式是wps
  • shell多进程并行返回值
  • macbookzen
  • window8.1
  • fpx是什么文件格式
  • edge以ie
  • unity接sdk教程
  • apktool破解应用内购
  • shell中数组如何定义
  • 使用Math.floor与Math.random取随机整数的方法详解
  • angular const
  • nodejs body-parser 解析post数据实例
  • [置顶]JM259194
  • python 网络编程总结
  • 国家税务稽查局举报中心
  • 浙江电子税务局网上开票
  • 退休个人所得税专项附加扣除减免
  • 杭州注册公司需要钱吗
  • 个体开专用票需要进项吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设