位置: IT常识 - 正文

CSS实现: 水平居中 的几种方法(css水平居中和垂直居中怎么设置)

编辑:rootadmin
CSS实现: 水平居中 的几种方法 实现方法:

推荐整理分享CSS实现: 水平居中 的几种方法(css水平居中和垂直居中怎么设置),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css水平居中的方法,css水平居中的几种方法,css设置水平线,css 水平布局,css水平居中的几种方法,css实现水平居中的几种方式,css水平居中怎么设置,css水平居中怎么设置,内容如对您有帮助,希望把文章链接给更多的朋友!

1、添加 margin 值 auto 2、定位 position(子绝父相) + 偏移值 left + margin-left 回退 [ 需要计算,有点 麻烦 ] 3、定位 position(子绝父相) + 偏移值 left + CSS-2d transform 4、文字居中 text-align:center; + 行内块元素 5、弹性盒子布局 [ 推荐 ]

示例

代码实现:

<div class="box"><div class="box1"></div></div>.box{width: 500px;height: 300px;background-color: aquamarine;}.box1{width: 200px;height: 100px;background-color: lightpink;}

原始效果图:

接下来,将使用这个例子来测试上面提到的几种实现水平居中的方法以及记录解决测试过程中出现的一些小问题…

添加margin值(外边距):margin:auto;.box1{ width: 200px; height: 100px; background-color: lightpink; margin: auto;}

效果图:水平居中成功实现

拓展注意点:

       如果需要小盒子上下也有一定边距,可以修改margin设置:margin:100px auto;

效果图:

从上面效果图可以发现:两个盒子同时向下移动

这种情况的出现是由 margin塌陷 导致的

那么,该如何解决这种问题呢?

这里,可以将父元素box变为BFC:overflow: hidden; [ 注意不是超出隐藏的作用 ]

CSS实现: 水平居中 的几种方法(css水平居中和垂直居中怎么设置)

效果图:

到这里,盒子们都走上了正轨,margin塌陷的问题完美解决 ~

定位 position + 偏移值 left + margin-left 回退.box{ width: 500px; height: 300px; background-color: aquamarine; position: relative;}.box1{ width: 200px; height: 100px; background-color: lightpink; position: absolute; /* 相对父级宽度50% */ left: 50%; margin-left: -100px;}

注意点:

只设置left: 50%;并不能实现水平居中的效果:

如果想让小盒子水平居中 ,需要向左移动半个小盒子的宽度距离:margin-left: -100px;

效果图:

定位 position + 偏移值 left + CSS-2d transform.box{ width: 500px; height: 300px; background-color: aquamarine; position: relative;}.box1{ width: 200px; height: 100px; background-color: lightpink; position: absolute; left: 50%; transform: translateX(-50%);}

注意点:

left: 50%; 与 transform: translateX(-50%); 中的 50% 代表的意义不一样: left: 50%; :相对于父元素box的宽度 transform: translateX(-50%); :相对于自己box1的宽度

效果图:

文字居中:text-align:center; + 行内块元素

.box{ width: 500px; height: 300px; background-color: aquamarine; text-align: center;}.box1{ width: 200px; height: 100px; background-color: lightpink; display: inline-block;}

注意点:

如果仅使用 text-align:center; 是无法达到水平居中的效果的,为什么?

text-align:center; 需要在行内块元素上使用的,而盒子是块级元素,所以,需要将盒子转换为行内块元素 text-align:center; 才能生效。

效果图:

弹性布局: display:flex; [推荐].box{ width: 500px; height: 300px; background-color: aquamarine; display: flex; /*主轴-x轴:居中*/ justify-content: center;}.box1{ width: 200px; height: 100px; background-color: lightpink;}

效果图:

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

上一篇:序列标注的BIO标注体系(序列标注技术应用)

下一篇:axios 取消请求:CancelToken(afn取消请求)

  • 萤石云视频没有回放怎么设置(萤石云视频没有麦克风)

    萤石云视频没有回放怎么设置(萤石云视频没有麦克风)

  • 苹果12有几款机型(苹果12有几款机型有什么区别)

    苹果12有几款机型(苹果12有几款机型有什么区别)

  • 淘宝店铺扣12分是什么意思(淘宝店铺扣12分后还要多久能报活动)

    淘宝店铺扣12分是什么意思(淘宝店铺扣12分后还要多久能报活动)

  • 微博会员苹果无法购买(苹果开微博会员不生效)

    微博会员苹果无法购买(苹果开微博会员不生效)

  • iphone11与华为p40对比(iphone11与华为p40pro对比)

    iphone11与华为p40对比(iphone11与华为p40pro对比)

  • 可不可以同时冻结首行和首列(冷冻可以结冰吗)

    可不可以同时冻结首行和首列(冷冻可以结冰吗)

  • 抖音广告在哪能找到(抖音广告在哪能看到)

    抖音广告在哪能找到(抖音广告在哪能看到)

  • 硬盘外接电源12V5A可以吗(硬盘外接电源12v10A可以吗)

    硬盘外接电源12V5A可以吗(硬盘外接电源12v10A可以吗)

  • 如何连接热点共享网络(如何连接热点共享移动网络华为)

    如何连接热点共享网络(如何连接热点共享移动网络华为)

  • ipadair3支持无线充电么(ipadair3能连无线鼠标吗)

    ipadair3支持无线充电么(ipadair3能连无线鼠标吗)

  • 替换是什么快捷键(替换快捷键是什么)

    替换是什么快捷键(替换快捷键是什么)

  • usb接口是并行接口么(usb接口并行还是串行)

    usb接口是并行接口么(usb接口并行还是串行)

  • 固态硬盘插主板哪个口(固态硬盘插主板为什么是斜的)

    固态硬盘插主板哪个口(固态硬盘插主板为什么是斜的)

  • 华为畅想10有指纹吗(华为畅想10有指纹解锁功能吗)

    华为畅想10有指纹吗(华为畅想10有指纹解锁功能吗)

  • 手机号码在哪里看(手机号码在哪里买)

    手机号码在哪里看(手机号码在哪里买)

  • 抖音怎么无字截屏(抖音想截图不想要字幕)

    抖音怎么无字截屏(抖音想截图不想要字幕)

  • 如何查询热力卡号(如何查询热力卡余额)

    如何查询热力卡号(如何查询热力卡余额)

  • 手机电量低于20%的危害(手机电量低于20%的辐射)

    手机电量低于20%的危害(手机电量低于20%的辐射)

  • 易语言能做什么(易语言能做什么辅助)

    易语言能做什么(易语言能做什么辅助)

  • 字处理平均成绩怎么算(字处理中的平均成绩怎么算)

    字处理平均成绩怎么算(字处理中的平均成绩怎么算)

  • nfc是啥(小米nfc是啥)

    nfc是啥(小米nfc是啥)

  • vivoz3的返回键在哪儿(vivoz3手机返回键在哪里)

    vivoz3的返回键在哪儿(vivoz3手机返回键在哪里)

  • 华为emui9.1怎么升级(华为emui9.1怎么样)

    华为emui9.1怎么升级(华为emui9.1怎么样)

  • 苹果手机短信拦截在哪里设置(苹果手机短信拦截功能如何解除设置)

    苹果手机短信拦截在哪里设置(苹果手机短信拦截功能如何解除设置)

  • grid 栅格/网格布局学习笔记(栅格布局实现)

    grid 栅格/网格布局学习笔记(栅格布局实现)

  • 一般纳税人购入固定资产的账务处理
  • 不计入销售收入
  • 清算后剩余财产归一方所有
  • 收到红字信息表不能直接开具
  • 高速公路通行费发票可以抵扣增值税吗
  • 低值易耗品计入什么账户
  • 厂区折旧
  • 企业会主动对税吗
  • 定期存款利息税是多少
  • 印刷制作费税收编码是啥
  • 借款利息开什么票
  • 开具增值税发票的注意事项有哪些?
  • 小规模增值税未开票收入填哪里
  • 固定资产改造计入什么科目
  • 收到委托代销清单,确认收入的会计分录
  • 一般户有没有开户许可证
  • 工程服务发票税率3%
  • 月销售不超过10万免征哪些税
  • 商家收白条
  • 三种测试网速的方法
  • 光伏电站运维费用清单
  • 本月发生的费用,下月取得发票,怎么做账
  • adb是什么程序
  • 事业单位收到拨入的工资怎么做账
  • 出售货物货款预缴增值税
  • 计提劳务派遣人数怎么算
  • 增值税价外费用是什么意思
  • ISBMgr.exe - ISBMgr是什么进程 有什么作用
  • yolov1代码
  • jquery 元素
  • php页面跳转可以用header
  • 公司之间借款利息需要开票吗
  • 应收利息的会计处理方法
  • 医院职工医疗保险报销比例
  • 城市维护建设税,教育费附加,地方教育费附加
  • python3 tcp
  • 企业所得税的营业收入怎么填
  • 会计准则中规范性的内容
  • 劳务公司在异地施工要在哪里缴税
  • 单位内部食堂怎么收费
  • 滴滴打车开具的普通发票可以抵扣吗
  • 信息技术服务费属于什么费用
  • 什么服务费发票可以免税的
  • 企业无偿为员工买社保
  • 对公支付宝可以转个人银行卡吗
  • mysql8.0免安装
  • spring-jdbc.jar
  • 在数据库中对数据表进行生成的是
  • mysql解压版怎么使用
  • win7电脑一键关机快捷键
  • win8怎么查看系统版本
  • win8.1 升级
  • ubuntu做开发怎么样
  • win8如何关闭开始屏幕
  • Mac系统中文件的唯一id
  • win10鼠标怎么换
  • win7系统如何修改ip地址
  • win7关闭系统更新在哪里
  • win10系统本地用户和组怎么添加
  • css实现下拉菜单的思路是
  • winrar指令
  • socketjs-node/info
  • unity接入安卓sdk
  • jquery 刷新div
  • android进程间通信机制有哪些
  • javascript图片切换代码
  • java learning
  • JavaScript的removeChild()函数用法详解
  • javascript面向对象编程 PDF
  • 领导班子和领导干部政绩观偏差主要问题清单
  • 留抵税款
  • 销售哪些产品需办许可证
  • 土地使用税2023征收标准
  • 收购烟叶多少公斤违法
  • 点击正式申报前怎么操作
  • 个税完税证明在电子税务局哪里打印
  • 郑州房子契税退税
  • 契税有发票吗,还是纳税证明
  • 请问在哪里可以培训护工
  • 生产企业出口退税账务处理会计分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设