【css面试题】 实现一个盒子的水平竖直居中对齐效果

面试题里有时还会强调 子盒子宽高是否已知,要注意一下

尝试一:给父盒子设置padding 或者子盒子设置margin

<style>.father{width: 300px;height: 200px;overflow: hidden; /* 放坑爹现象,不信你删了试试 */background-color: #db7b7b;}.son{width: 100px;height: 100px;margin: auto;background-color: #d8db7b;}
</style>
<body><div class="father"><div class="son">aa</div></div>
</body>

在这里插入图片描述
失败,只能水平居中,垂直不可以!!!!!!!
原因
http://t.csdn.cn/AOMJ1
http://t.csdn.cn/cFsg6

margin:auto为什么不垂直居中

margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向上应该获得的剩余空间大小。

行内元素margin:auto; 不能水平居中在一行的中央位置(行内元素不独占一行)。

块级元素设置宽度后仍占据一行空间,因此margin:auto;会将这一行的剩余空间平均分配给左右外边距。

margin:auto 能使块级元素水平居中,但是不能垂直居中,因为垂直方向上默认没有剩余的空间。

注:行内元素margin:auto既不能水平居中也不能垂直居中,因为行内元素水平垂直方向上默认都没有剩余的空间。

解一:子绝父相+margin:auto+四周是0(子有宽高

<style>.father{position: relative;  /* !!!! */width: 300px;height: 200px;overflow: hidden; /* 放坑爹现象,不信你删了试试 */background-color: #db7b7b;}.son{position: absolute;  /* !!!! */width: 100px;height: 100px;/* !!!! */top:0;left:0;bottom:0;right:0;margin: auto;background-color: #d8db7b;}
</style>
<body><div class="father"><div class="son">aa</div></div>

在这里插入图片描述
但这种情况不适用于 子盒子 不定宽高 的情况,例如子盒子会盛满整个父盒子
在这里插入图片描述

尝试二:子绝父相+margin-top/left:50%+transform

子盒子 宽高已知

<style>.father{position: relative;  /* !!!! */width: 300px;height: 200px;overflow: hidden; /* 放坑爹现象,不信你删了试试 */background-color: #db7b7b;}.son{position: absolute;  /* !!!! */width: 100px;height: 100px;/* !!!! */margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%);background-color: #d8db7b;}
</style>
<body><div class="father"><div class="son">aa</div></div>
</body>

如果你以为这个方法可以通用,那你就错了,因为

marginpadding无论left还是right还是top还是bottom都是相对于父元素width的,若如果没有,找其父辈元素的宽度,均没设宽度时,相对于屏幕的宽度。
在这里插入图片描述
http://t.csdn.cn/Pwcy6
http://t.csdn.cn/YSubI

所以说,尝试一,给父盒子加padding,根本不行,父盒子的padding参考body的大小,所以就把父盒子撑大了
在这里插入图片描述在这里插入图片描述所以不要试padding了!!!

解二:子绝父相+margin-left/top:父盒子一半+transform(子定宽高

<style>.father{position: relative; width: 300px;height: 200px;overflow: hidden; /* 放坑爹现象,不信你删了试试 */background-color: #db7b7b;}.son{position: absolute; width: 100px;height: 100px;/* !!!! */margin-top: 100px; margin-left: 150px;transform: translate(-50%,-50%);background-color: #d8db7b;}
</style>
<body><div class="father"><div class="son">aa</div></div>
</body>

解三:子绝父相+top/left:50%+transform(子不定宽高

子盒子可以 不定宽高

<style>.father{position: relative;  /* !!!! */width: 300px;height: 200px;overflow: hidden; /* 放坑爹现象,不信你删了试试 */background-color: #db7b7b;}.son{position: absolute;  /* !!!! */width: 100px;height: 100px;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #d8db7b;}
</style>

解四:子绝父相+top/left:50%+magin-top/left: 负 子一半(子宽高已知

也就是把transform: translate(-50%,-50%); 替换成margin-top: -50px;margin-left: -25px;所以,子盒子宽高已知

<style>.father{position: relative;  width: 300px;height: 200px;overflow: hidden; /* 放坑爹现象,不信你删了试试 */background-color: #db7b7b;}.son{position: absolute;width: 50px;  /* !!!! */height: 100px;top: 50%;left: 50%;/* transform: translate(-50%,-50%); */margin-top: -50px;margin-left: -25px;background-color: #d8db7b;}
</style>

flex

父盒子flex布局,并设置justify-content: center; align-items: center;

<style>.father{display: flex;justify-content: center;  align-items: center;width: 300px;height: 200px;background-color: #db7b7b;}.son{background-color: #d8db7b;}
</style>

table - cell

将父盒子设置display: table-cell; 并设置text-align: center; vertical-align: middle; 子盒子设置display: inline-block;

http://t.csdn.cn/cmr2B

<style>.father{display: table-cell;text-align: center;vertical-align: middle;width: 300px;height: 200px;background-color: #db7b7b;}.son{display: inline-block;background-color: #d8db7b;}
</style>

grid

父盒子设置为网格元素display: grid; 并设置 place-items: center;

<style>.father{display: grid;place-items: center;width: 300px;height: 200px;background-color: #db7b7b;}.son{background-color: #d8db7b;}
</style>

总结:

1.试方法要多个栗子,不能只试正方形,这样就发现不了margin依据父的宽度

2.子盒子不定宽高,只能设置top/left:50%,不能设置margin-left:50%,是因为top/left:50%不像margin都参照父的width

在这里插入图片描述

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

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

相关文章

数据可视化:揭示隐藏信息的强大工具

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 引言 数据可视化是将数…

为什么选择事件驱动的微服务架构?

在当今动态的业务环境中&#xff0c;开发人员面临越来越大的压力&#xff0c;需要提供快速、可靠、可扩展的解决方案&#xff0c;以满足不断变化的业务需求&#xff0c;而事实证明&#xff0c;传统应用程序是实现这些目标的障碍。微服务提供了一种易于理解且有前途的替代方案&a…

Java基于SpringBoot的闲一品交易平台

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 大家好&#xff0c;我是程序员徐师兄、今天给大家谈谈基于android的app开发毕设题目&#xff0c;以及基于an…

华为云云服务器云耀L实例评测 | 从零开始:华为云云服务器L实例使用教程

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

【视觉SLAM入门】7.3.后端优化 基于KF/EKF和基于BA图优化的后端,推导及举例分析

"时间倾诉我的故事" 1. 理论推导2. 主流解法3. 用EKF估计状态3.1. 基于EKF代表解法的感悟 4. 用BA法估计状态4.1 构建最小二乘问题4.2 求解BA推导4.3 H的稀疏结构4.4 根据H稀疏性求解4.5 鲁棒核函数4.6 编程注意 5.总结 引入&#xff1a; 前端里程计能给出一个短时间…

网络电视盒子哪个品牌好?测评工作室深入分析电视盒子排名

电视盒子只需要联网就可以收看海量资源&#xff0c;不需要每月缴费&#xff0c;玩游戏、上网课、K歌都不在话下&#xff0c;对新手来说电视盒子如何选择&#xff1f;网络电视盒子哪个品牌好&#xff1f;工作室购入了最热销的15款电视盒子经过多角度对比后整理了电视盒子排名&am…

golang教程 beego框架笔记一

安装beego 安装bee工具 beego文档 # windos 推荐使用 go install github.com/beego/bee/v2master go get -u github.com/beego/bee/v2masterwindows使用安装bee工具时碰到的问题&#xff1b; 环境配置都没有问题&#xff0c;但是执行官网的命令&#xff1a;go get -u github…

JAVA黑马程序员day12--集合进阶(下部--双列集合)

Map HashMap 练习一 需提前定义学生类&#xff0c;并重写HashMap方法&#xff08;不然无法覆盖&#xff09; public class MapDemo4 {public static void main(String[] args) {//1.创建HashMap对象HashMap<Student,String> hmnew HashMap<>();//2、创建3个学生对…

C++面试记录之中望软件

上次面试体验不好&#xff0c;记录了&#xff0c;这次同样记录一次体验不好的面试&#xff0c;中望软件…直接写了名字&#xff0c;因为真的很无语&#x1f613; 记录一下我不知道的问题 忘记录音了&#x1f622; 1. main函数之前做了什么&#xff1f; 我&#xff1a;实话我…

运维面试宝典

【Linux基础篇】 1.描述Linux运行级别0-6的各自含义 0 &#xff1a;关机模式 1 &#xff1a;单用户模式 < 破解 root 密码 2 &#xff1a;无网络支持的多用户模式 3 &#xff1a;有网络支持的多用户模式&#xff08;文本模式&#xff0c;工作中最常用的模式&#xff09;…

跨境电商如何防关联?关联因素有哪些?

相信许多想要入局跨境电商小伙伴都遇到”防关联“的难题&#xff0c;想要在跨境路上驰骋无阻&#xff0c;那你一定不能忽略各平台的多账号防关联问题。下面小编为大家介绍&#xff0c;我的实操解决防关联的经验&#xff0c;往下看&#xff01; 通常防关联需要从以下因素进行考虑…

Mixin从理论到实践

mixin从理论到实践 mixin从理论到实践一、什么是mixin二、使用mixin三、mixin的合并策略四、mixin辨析五、个人实践 mixin从理论到实践 一、什么是mixin mixin混入 — Vue.js (vuejs.org) 官方解释&#xff1a; 混入 (mixin) 提供了一种非常灵活的方式&#xff0c;来分发 Vue …