css --- [小结]让盒子水平垂直居中的解决方案

描述

  • 有如下模型,想办法让
<style>.box{width: 500px;height: 500px;background: skyblue;}
</style>
<div class="box"><div class="inner"></div>
</div>
  • 想办法让inner在box中水平垂直居中

方案1: 使用绝对定位

  • 让子盒子相对于父盒子绝对定位,
  • 然后距离 左/上 边50%,
  • 在将外边距设为盒子 宽/高 的一半
    代码如下:
.box{position: relative;width: 150px;height: 150px;background: skyblue;
}
.inner{position: absolute;width: 50px;height: 50px;left:  50%;top: 50%;margin-left: -25px;margin-top: -25px;background: lightcoral;
}

在这里插入图片描述

方案2: 使用transform

  • 上面需要手动移动子盒子的宽高,即每次都要计算子盒子的宽高/2,
  • 可以尝试使用CSS3的transform属性,将盒子在水平和垂直方向移动-50%
  • 代码如下:
.inner {position: absolute;width: 50px;height: 50px;left: 50%;top: 50%;transform: translate(-50%, -50%);background: lightcoral;
}

在这里插入图片描述

方案3: margin…

  • 此方法比较奇怪…
  • 思路是利用绝对定位,让盒子的left top right bottom全部为0,然后设置margin为auto
  • 代码如下
.inner {position: absolute;width: 50px;height: 50px;left: 0;top: 0;right: 0;bottom: 0;margin: auto;background: lightcoral;
}

在这里插入图片描述

方案4: 使用js

  • 使用js先获取父盒子的 宽/高
  • 在获取子盒子的宽高,然后使用绝对定位,将左边距设置为 (父盒子宽 - 子盒子宽) / 2
<script>var box = document.querySelector('.box')var inner = document.querySelector('.inner')// 父盒子 宽高var bW = box.offsetWidthvar bH = box.offsetHeight// 子盒子 宽/高var iW = inner.offsetWidthvar iH = inner.offsetHeightinner.style.position = 'absolute'inner.style.left = (bW - iW) / 2 + 'px'inner.style.top = (bH - iH) / 2 + 'px'
</script>

方案5: flex布局

  • 个人认为最简单最棒的一种布局
  • 只需设置父元素的布局为flex布局,然后设置 justify-contentalign-items属性
  • 代码如下:
<style>
.box {display: flex;justify-content: center;align-items: center;width: 150px;height: 150px;background: skyblue;
}
.inner {width: 50px;height: 50px;background: lightcoral;
}
</style>

方案6: table-cell

  • 思想是将子盒子变成文本的形式(inline-block)
  • 然后向控制文本水平垂直居中
<style>.box {display: table-cell;text-align: center;vertical-align: middle;width: 150px;height: 150px;background: skyblue;}.inner {display: inline-block;width: 50px;height: 50px;background: lightcoral;}
</style>

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

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

相关文章

作业3

import turtle turtle.bgcolor(red) turtle.color(yellow)turtle.fillcolor(yellow) turtle.begin_fill() for i in range(5):turtle.forward(100)turtle.right(144) turtle.end_fill() turtle.done()转载于:https://www.cnblogs.com/zhangkef97/p/9016608.html

分组查询

1、简单分组查询 语法形式&#xff1a; select function() from table_name where condition group by field; 进行分组查询时&#xff0c;分组所依据的字段上的值一定要有重复值&#xff0c;否则分组没有任何意义。 2、实现统计功能分组查询 关键字group by单独使用时&#xf…

深入探讨多模态模型和计算机视觉

近年来&#xff0c;机器学习领域在从图像识别到自然语言处理的不同问题类型上取得了显着进展。然而&#xff0c;这些模型中的大多数都对来自单一模态的数据进行操作&#xff0c;例如图像、文本或语音。相比之下&#xff0c;现实世界的数据通常来自多种模态&#xff0c;例如图像…

移动硬盘函数不正确要如何寻回资料

移动磁盘打不开函数不正确&#xff0c;是因为这个I盘的文件系统内部结构损坏导致的。要恢复里面的数据就必须要注意&#xff0c;这个盘不能格式化&#xff0c;否则数据会进一步损坏。具体的恢复方法看正文 工具/软件&#xff1a;AuroraDataRecovery 步骤1&#xff1a;先百度搜索…

HashMap的四种访问方式

第一种&#xff1a;通过Map.entrySet使用iterator遍历key和value 1 public void visit_1(HashMap<String,Integer> hm){ 2 Iterator<Map.Entry<String,Integer>> it hm.entrySet().iterator(); 3 while(it.hasNext()){ 4 Map.Entry<String ,Integer> …

C#/WPF程序开机自动启动

最近一个C/S项目客户要求开机自启的功能&#xff0c;网上找了一些方法&#xff0c;不顶用&#xff1b;最后自己去翻书&#xff0c;找到了这段代码&#xff0c;亲测可用&#xff0c;Wpf环境下需要改下获取程序目录的方式即可&#xff0c;Winform直接可用。 1 #regio…

记录一个坑

导入项目后运行控制台打印异常,pom都已检查,没有任何问题 解决办法: 项目右击---properties---deployment assembly---add---java build path entries---maven deoendencies 保存并关闭 解决... 这个问题第一次遇到 检查了很多遍maven的依赖,明明都已经配置好了 ,仍然产生了…

洛谷 P4011 孤岛营救问题【最短路+分层图】

题外话&#xff1a;昨夜脑子昏沉&#xff0c;今早一调试就过了...错误有&#xff1a;我忘记还有墙直接穿墙过...memset初始化INF用错了数...然后手残敲错一个状态一直过不了样例...要是这状态去比赛我简直完了......orz 题目链接&#xff1a;https://www.luogu.org/problemnew/…

微信小程序 --- [笔记小结] 环境搭建,基础学习

说明 源代码拷贝源代码 git clone https://github.com/Lizhhhh/miniProgram.git进入目录cd miniProgram查看tag: git tag选择需要查看的知识点,如: git checkout 02_Text 学习的视频失效了…后续还会找资源学习… 小程序 地址 一种不需要下载安装即可使用的应用,它实现了应…

tar压缩/解压用法

格式&#xff1a;tar zcvf 压缩后的路径及包名 你要压缩的文件 z:gzip压缩 c:创建压缩包 v:显示打包压缩解压过程 f:接着压缩 t:查看压缩包内容 x:解压 X:指定文件列表形式排除不需要打包压缩的文件或目录 -exclude:指定排除文件或目录不需要打包压缩的文件或目录&#xff08;也…

解决phpmyadmin 遇见的问题

1、phpmyadmin4.8.3 上传到网站目录后提示解决phpmyadmin mysqli_real_connect(): (HY000/2002): No such file or directory的错误&#xff0c; 解决方法把phpmyadmin目录中的配置文件config.sample.inc.php改成config.inc.php&#xff0c;并把 $cfg[Servers][$i][host] loc…

浅谈mysql

因为本地mysql服务的命名是mysql57&#xff0c;所以在终端启动和关闭mysql的时候&#xff0c;我们这么写&#xff0c; net stop mysql57 ;net start mysql57;如图所示 接着输入mysql -u -root -p&#xff1b; 然后输入自己的密码&#xff1b; 查看有多少个库 show database…

藤条生长为字母的动画

https://www.youtube.com/watch?vLshPEGiHsqc Blender Tutorial: Vine Animation Text 需要使用插件Add Curve: IvyGen, 进入用户设置,找到并沟选该插件. 建模:立体文字, [Alt C] 转换为网格mesh;选中网格文字,新建藤蔓:[Shift A], Curve\Add Ivy to Mesh左边工具栏下方的IvyG…

读书笔记 --- 再次阅读回流与重绘

参考 - 强烈推荐看看,这个作者写了很多特别好的文章. 浏览器渲染过程 解析HTML,生成DOM树; 解析CSS生成CSSOM树将DOM树和CSSOM树合并,生成渲染(Render)树Layout(回流): 根据生成的渲染树,视口(viewport),得到节点的几何信息(位置、大小)Painting(重绘): 根据渲染树和几何信息…

2017-2018 ACM-ICPC, Asia Daejeon Regional Contest

C 有n个节点和m边条&#xff0c;求一条最长的路径&#xff0c;该路径(c1,c2,c3...cn)满足 不出现重复的节点&#xff0c;ci 和ci1是邻居节点&#xff0c;且 ci 的邻居节点数量小于ci1的邻居节点数量。 记忆DFS遍历&#xff0c;每次递归计算的值都保存在数组里&#xff0c;这样复…

装系统工具

安装如果失败,注意是不是工具的版本太老导致 系统分区工具: DiskGeniusPortable 刻录工具: UlraISO rufus https://rufus.ie/ win32diskimager 转载于:https://www.cnblogs.com/jiangfeilong/p/9937164.html

小程序WXML基本使用

数据绑定 <!--wxml--> <view> {{message}} </view> // page.js Page({data: {message: Hello MINA!} }) 列表渲染 <!--wxml--> <view wx:for"{{array}}"> {{item}} </view> // page.js Page({data: {array: [1, 2, 3, 4, 5]} })…

tomcat 虚拟路径 与 虚拟主机配置

虚拟路径配置 方法一&#xff1a;此方法需要重启服务 打开下面文件 在host里面添加context标签 <Context docBase"D:\test" path"/testServlet/aaaaa" reloadable"true" /> 浏览器访问&#xff1a;http://172.16.6.103:1080/testServlet/a…

20172328 2018-2019《Java软件结构与数据结构》第八周学习总结

20172328 2018-2019《Java软件结构与数据结构》第八周学习总结 概述 Generalization 本周学习了二叉树的另一种有序扩展&#xff1f;是什么呢&#xff1f;你猜对了&#xff01;ヾ(◍∇◍)&#xff89;&#xff9e;就是堆。本章将讲解堆的链表实现and数组实现&#xff0c;以及往…

javascript --- Vue初始化 模板渲染

不带响应式的Vue缩减实现 模板 现有模板如下: <div id "app"><div class"c1"><div titlett1 id"id">{{ name }}</div><div titlett2 >{{age}}</div><div>hello3</div></div><ul>…