面试必考题 CSS的居中布局

CSS居中对齐的几种方式

      • 使用flex布局
        • 利用css3中的flex弹性盒的属性
        • 利用子元素auto
      • 使用grid布局
      • 使用定位
        • 使用定位与margin
        • 利用CSS3属性transform
      • 使用文本对齐
      • 使用table布局

使用flex布局

利用css3中的flex弹性盒的属性
.parent {display: flex;justify-content: center;align-items: center;}
利用子元素auto
.parent{display:flex;
}
.son{margin:auto;
}

在这里插入图片描述

使用grid布局

.parent{
display: grid;
place-items: center;
}
或
.parent{
display:grid;
justify-content: center;
align-items: center;
}

在这里插入图片描述

使用定位

使用定位与margin
.parent{position:relative;
}
.son{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;
}
利用CSS3属性transform
.son{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

在这里插入图片描述

使用文本对齐

.parent{
width:400px;
height:400px;
background-color: skyblue;
//行高与元素高度一致
line-height: 400px; 
//水平对齐
text-align: center;
}

在这里插入图片描述

使用table布局

.parent{width:400px;height:400px;background-color: skyblue;display: table-cell;vertical-align: middle;}.son{width:100px;height:100px ;background-color: greenyellow;margin: auto;}

在这里插入图片描述

如果文章对你有所帮助,关注+点赞鼓励一下!会持续更新文章

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

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

相关文章

经典面试题【作用域、闭包、变量提升】,带你深入理解掌握!

前言:哈喽,大家好,我是前端菜鸟的自我修养!今天给大家分享经典面试题【作用域、闭包、变量提升】,并提供具体代码帮助大家深入理解,彻底掌握!原创不易,如果能帮助到带大家&#xff0…

欧洲杯赛况@20240622

点击标题下「蓝色微信名」可快速关注 斯洛伐克对阵乌克兰,场面上大开大合,施兰茨连场进球,但这次乌克兰丢球后没泄气,连进两球反超, 从数据统计上,两队不相上下,这个小组的形势更加复杂了&#…

【ajax核心05】宏任务与微任务

ES6之后引入Promise对象(用来管理异步任务),让JS引擎也可以发起异步任务 一:异步任务分类 异步任务分为:宏任务与微任务 宏任务 由浏览器环境执行的异步代码 具体宏任务分类 微任务 由JS引擎执行的代码 创建Promise对象时,…

Java中的Servlet编程:从基础到高级应用

Java中的Servlet编程:从基础到高级应用 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!在本文中,我们将探讨Java中的Servlet编程&#x…

[JS]语句

介绍 代码分类 表达式: 可以被求值的代码称为表达式, 可以用于赋值 语句: 一段可执行的代码, 可以有结果, 可以没有结果, 不能用于赋值 语句分类 代码从上往下执行, 称为顺序结构代码按照条件选择执行, 称为分支结构某些代码被重复执行, 成为循环结构 分支结构 if分支 if…

python-今年第几天

[题目描述] 定义一个结构体变量(包括年、月、日)。 计算该日在本年中是第几天,注意闰年问题。输入格式: 年 月 日。输出格式: 当年第几天。样例输入 2000 12 31样例输出 366 数据范围 对于100%的数据,保…

【C++PCL】点云处理Kd-tree原理

作者:迅卓科技 简介:本人从事过多项点云项目,并且负责的项目均已得到好评! 公众号:迅卓科技,一个可以让您可以学习点云的好地方 重点:每个模块都有参数如何调试的讲解,即调试某个参数对结果的影响是什么,大家有问题可以评论哈,如果文章有错误的地方,欢迎来指出错误的…

【前端vue3】TypeScrip-基础类型和任意类型

安装TypeScript npm install typescript -g 运行tsc -v可查看当前版本 为了方便调试可以安装 先安装小满zs大神写的工具,可以切换下载源 npm i xmzs -g 安装成功后 使用mmp ls查看当前的源有哪些 使用 mmp use选择镜像源 切换成功后,安装TypeScrip…

C#的膨胀之路:创新还是灭亡

开篇概述 C#,这门由微软推出的编程语言,自2000年诞生以来,以其简洁的语法、强大的功能和广泛的应用场景,赢得了我等程序员的热爱。它在.NET框架的加持下,展现出无与伦比的开发效率和性能。然而,随着时间的流…

PathDecider 详细解读

目录 PathDecider的主要功能 PathDecider代码分析 Process() MakeObjectDecision() MakeStaticObstacleDecision() MakeStaticObstacleDecision()的流程图​编辑 MakeStaticObstacleDecision()的代码解析 GenerateObjectStopDecision() PathDecider里用到的其他函数 …

6 DSL_03地理信息查询相关性算分

1. 根据经纬度查询 (1) geo_bounding_box: 查询geo_point值落在某个矩形范围内的文档get /hotel/_search {"query":{"geo_bounding_box": {"location":{"top_left":{"lat":33.01,"lon":35.36},"bottom_righ…

ARM功耗管理框架之PPU

安全之安全(security)博客目录导读 思考:功耗管理框架?SCP?PPU?LPI?之间的关系?如何配合? 目录 一、功耗管理框架中的PPU 二、PPU的结构与连接关系 三、PPU操作模式和电源模式及其之间的转…

管理不到位,活该执行力差?狠抓这4点要素,强化执行力

管理不到位,活该执行力差?狠抓这4点要素,强化执行力 一:强化制度管理 1、权责分明,追责管理 要知道,规章制度其实就是一种“契约”。 在制定制度和规则的时候,民主一点,征求团队成员…

HTTP网络协议

1.HTTP (1)概念: Hyper Text Transfer Protocol,超文本传输协议规定了浏览器和服务器之间数据传输的规则。 (2)特点 基于TCP协议:面向连接,安全基于请求-响应模型的:一次请求对应一次响应HTTP协…

mysql高级语句2存储过程

CREATE VIEW 视图,可以被当作是虚拟表或存储查询。 视图跟表格的不同是,表格中有实际储存数据记录,而视图是建立在表格之上的一个架构,它本身并不实际储存数据记录。 临时表在用户退出或同数据库的连接断开后就自动消失了&…

利用竞争智慧与大型语言模型:假新闻检测的新突破

Explainable Fake News Detection With Large Language Model via Defense Among Competing Wisdom 论文地址: Explainable Fake News Detection with Large Language Model via Defense Among Competing Wisdom | Proceedings of the ACM on Web Conference 2024https://dl.…

WebClient vs RestTemplate

WebClient vs RestTemplate:优缺点总结 RestTemplate 优点: 简单易用:RestTemplate 是同步的,使用方式简单,适合初学者。广泛使用:在很多Spring项目中已经广泛使用,有丰富的文档和社区支持。…

LeetCode 100342. 最小元素和最大元素的最小平均值

更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡,更多解法等你一起来参与哦! LeetCode 100342. 最小元素和最大元素的最小平均值,难度简单。 排序 解题思路:排序后取每次取数组首尾节点,求…

Docker常用命令与实战示例

docker 1. 安装2. 常用命令3. 存储4. 网络5. redis主从复制示例6. wordpress示例7. DockerFile8. 一键安装超多中间件(compose) 1. 安装 以centOS系统为例 # 移除旧版本docker sudo yum remove docker \docker-client \docker-client-latest \docker-c…

CTO的职责是什么?

看《架构思维》作者是这样讲的: CTO 到底是做什么的? 我当下的答案是:“CTO 就是一个从技术视角出发,为公司或者所在的部门做正确决策的 CEO。”怎么理解这句话呢?作为一个 CTO,其长期目标和决策优先级与…