【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中
【CSS】元素居中
- 一、 水平居中
- 1.行内元素水平居中
- (1)text-align
- 2.块级元素水平居中
- 2.1 margin
- (1)margin
- 2.2布局
- (1)flex+ justify-content(推荐)
- (2) flex+margin
- (3)grid+ justify-content
- (4)grid+ margin
- (5)table+margin
- 2.3 定位
- (1)absolute+translate+left
- (2)absolute+margin
- (3)absolute+负margin+left(定宽)
- (4)relative + 负margin(定宽)
- 2.4 其他方法
- (1)转行内元素inline-block+text-align
- (2)浮动元素:margin
- (3)浮动元素:relative
- 二、 垂直居中
- 1.行内元素水平居中
- (1)line-height=height
- 2.块级元素垂直居中
- 2.2布局
- (1)flex+ align-items
- (2)flex+ margin
- (3)grid+ align-content
- (4)table-cell+vertical-align+inline-block
- 2.3 定位
- (1)absolute+translate+top
- (2)absolute+负margin+left(定宽)
- 3.垂直水平居中
- 3.1布局
- (1)flex+ align-items+justify-content
- (2)flex+ margin
- (3)grid+ place-items
- (4)table-cell+text-align+vertical-align
- 3.1定位
- (1)absolute+translate+left+top
- (2)absolute+负margin+left+top(定宽)
每每用到居中,总会头疼于css的编写,想着一定要找个时间好好整理一番:
整理的过程中发现很多拼拼凑凑的属性都能实现居中,其实掌握通用的几个就行,一般都比较推荐flex布局,绝对定位在项目中也常有见到,大部分水平和垂直居中分别掌握了,水平垂直居中就是合并在一起,简单的做了个图
(代码部分可以用菜鸟工具在线运行查看:https://c.runoob.com/front-end/61/)
一、 水平居中
1.行内元素水平居中
(1)text-align
(1)块级元素使用text-align: center,使得块级元素文本内容水平居中
(2)块级元素使用text-align: center,使得包含在块级元素的行内元素或行内块元素居中对齐
(3)块级元素下使用text-align: center,包含在其中的块级元素不能居中对齐
<div class="div1"><p class="p1">块级元素内块级元素文本内容水平居中</p><span class="span1">块级元素内行内元素或行内块元素水平居中</span><p class="p2">块级元素内块级元素本身不能水平居中</p><p class="p2">但块级元素内块级元素继承了文本内容水平居中</p>
</div>
.div1{width:80%;border:10px solid green;text-align:center;
}
.p1{background-color:red
}
.span1{background-color:yellow
}
.p2{background-color:grey;width:80%
}
2.块级元素水平居中
2.1 margin
(1)margin
块级元素上margin:0 auto (必须设置宽度width)
适合单个块级元素
<div class="div1"><p class="p1">块级元素利用margin水平居中</p>
</div>
.div1{width:90%;border:10px solid red;}
.p1{background-color:grey;width:90%;margin:0 auto;
}
2.2布局
(1)flex+ justify-content(推荐)
块级元素父元素上:
display:flex
justify-cointent:center
(可实现多个块元素同行居中)
<div class="div2"><p class="p2">块级元素利用flex+justify-content水平居中</p>
</div>
.div2{width:90%;border:10px solid blue;display:flex;justify-content:center;
}.p2{width:90%;background-color:grey;
}
(2) flex+margin
父元素: display:flex
子元素: margin:0 auto
(可实现多个块元素在一行中水平居)
<div class="div3"><p class="p3">块级元素利用flex+margin水平居中</p>
</div>
.div3{width:90%;border:10px solid purple;display:flex;
}
.p3{width:90%;background-color:grey;margin:0 auto
}
felx+margin此方法还可实现多个块元素在一行中水平居中
<div class="div3"><p class="p3">块级元素利用flex+margin水平居中</p><p class="p3">块级元素利用flex+margin水平居中</p><p class="p3">块级元素利用flex+margin水平居中</p>
</div>
.div3{width:90%;height:20%;border:10px solid purple;display:flex;
}
.p3{background-color:grey;border:1px solid yellow;margin:0 auto
}
(3)grid+ justify-content
(4)grid+ margin
将方法(1)(2)中flex改为grid即可实现
此方法不能多个块元素一行居中
(5)table+margin
将方法(2)中flex改为table即可实现
此方法不能多个块元素一行居中
2.3 定位
(1)absolute+translate+left
父元素相对定位:position:relative;
子元素绝对定位:
position:absolute;
left:50%;
transform:translate(-50%,0);
其中: left:50%子元素以它自己的左边为基准,向右平移了父元素宽度的50%,此时子元素的左边基准在中间位置,整体子元素偏右
transform:translate(-50%,0);(子元素向左平移自己宽度的一半)
transate参考:https://blog.csdn.net/weixin_42154189/article/details/109714379
<div class="div6"><p class="p6">块级元素absolute+translate水平居中</p>
</div>
.div6{width:90%;height:20%;border:10px solid orange;position:relative;
}
.p6{width:90%;background-color:grey;position:absolute;left:50%;transform:translate(-50%,0);
}
(2)absolute+margin
父级元素:position:relative
子元素:
position:absolute;
left:0;
right:0;
margin:0 auto;
<div class="div9"><p class="p9">块级元素absolute+margin水平居中</p>
</div>
.div9{width:90%;height:20%;border:10px solid pink ;position:relative;
}
.p9{width:90%;background-color:grey;position:absolute;left:0;right:0;margin:0 auto;}
(3)absolute+负margin+left(定宽)
(类似于absolute+translate,只不过这个要求居中的元素定宽)
父级元素:position:relative
子元素:
position:absolute;
left:50%;
margin-left:-100px;
<div class="div8"><p class="p8">块级元素absolute+负margin水平居中</p>
</div>
.div8{width:90%;height:20%;border:10px solid Brown ;position:relative;
}
.p8{width:200px;background-color:grey;position:absolute;left:50%;margin-left:-100px;}
(4)relative + 负margin(定宽)
对于定宽的块级元素:(对于浮动元素也有效)
position:relative
margin-left:-(元素宽一半)px;
<div class="div7"><p class="p7">块级元素relative + 负margin(定宽)水平居中</p>
</div>
.div7{width:90%;border:10px solid black;
}
.p7{width:200px;background-color:grey;position:relative;left:50%;margin-left:-100px;
}
2.4 其他方法
(1)转行内元素inline-block+text-align
块级元素转为行内元素:
父级元素text-align:center ;
块级元素display:inline-block;
(其中多个块级元素并列,可在并列块级元素中添加display:inline-block;)
<div class="div5"><p class="p5">块级元素转为行内元素水平居中</p>
</div>
.div5{width:90%;border:10px solid yellow;text-align:center;
}
.p5{width:90%;background-color:grey;display:inline-block;
}
(2)浮动元素:margin
在浮动的元素外套一个div,设置margin: 0 auto
<div class="div10"> <div class="div101"><p class="p10">浮动块级元素水平居中</p></div>
</div>
.div10{width:90%;height:20%;border:10px solid GreenYellow ;
}
.div101{width:20%;margin:0 auto;
}
.p10{background-color:grey;float: left;
}
(3)浮动元素:relative
<div class="div11"> <div class="div111"><p class="p11">浮动块级元素水平居中</p></div>
</div>
.div11{width:90%;height:20%;border:10px solid LightBlue ;
}
.div111{float: left;position: relative;left: 50%;
}
.p11{
background-color:grey;
float: left;
position: relative;
right: 50%;
}
二、 垂直居中
1.行内元素水平居中
(1)line-height=height
父元素的height=子元素line-height
<div class="div1"> <p class="p1">浮动块级元素垂直居中</p>
</div>
*{margin:0px;padding
}
.div1{width:90%;height:200px;border:10px solid GreenYellow ;
}
.p1{background-color:grey;line-height:200px
}
2.块级元素垂直居中
2.2布局
(1)flex+ align-items
父元素:display:flex;
align-items:center;
<div class="div2"><p class="p2">块级元素利用flex+align-items垂直居中</p>
</div>
*{margin:0px;padding
}
.div2{width:90%;height:20%;border:10px solid blue;display:flex;align-items:center;
}.p2{width:90%;background-color:grey;
}
(2)flex+ margin
<div class="div3"><p class="p3">块级元素利用flex+margin垂直
</div>
*{margin:0px;padding:0px;
}
.div3{width:90%;height:100px;border:10px solid purple;display:flex;
}
.p3{width:40%;background-color:grey;margin:auto 0
}
(3)grid+ align-content
display:grid;
align-content:center;
<div class="div22"><p class="p22">块级元素利用grid+align-content垂直居中</p>
</div>
*{margin:0px;padding
}
.div22{width:90%;height:20%;border:10px solid red;display:grid;align-content:center;
}.p22{background-color:grey;
}
(4)table-cell+vertical-align+inline-block
<div class="div2"><p class="p2">块级元素利用table-cell;vertical-align垂直居中</p>
</div>
.div2{width:90%;height:200px;border:10px solid blue;vertical-align:middle;display:table-cell;
}.p2{width:90%;background-color:grey;display:inline-block;
}
2.3 定位
(1)absolute+translate+top
参照水平方法,把移动从x轴变为y轴即可
父元素相对定位:position:relative;
子元素绝对定位:
position:absolute;
top:50%;
transform:translate(0,-50%);
<div class="div6"><p class="p6">块级元素absolute+translate垂直居中</p>
</div>
*{margin:0px;padding
}
.div6{width:90%;height:20%;border:10px solid orange;position:relative;
}
.p6{width:90%;background-color:grey;position:absolute;top:50%;transform:translate(0,-50%);
}
(2)absolute+负margin+left(定宽)
<div class="div8"><p class="p8">块级元素absolute+负margin垂直居中</p>
</div>
*{margin:0px;padding
}
.div8{width:90%;height:200px;border:10px solid Brown ;position:relative;
}
.p8{width:200px;height:100px;background-color:grey;position:absolute;top:50%;
margin-top:-50px;
}
3.垂直水平居中
3.1布局
(1)flex+ align-items+justify-content
结合水平和垂直方法
<div class="div2"><p class="p2">块级元素利用flex+align-items+justify-content垂直居中</p>
</div>
*{margin:0px;padding
}
.div2{width:90%;height:20%;border:10px solid blue;display:flex;align-items:center;justify-content:center;
}.p2{width:90%;background-color:grey;
}
(2)flex+ margin
结合水平和垂直方法
<div class="div3"><p class="p3">块级元素利用flex+margin垂直居中</p>
</div>
*{margin:0px;padding:0px;
}
.div3{width:90%;height:100px;border:10px solid purple;display:flex;
}
.p3{width:40%;background-color:grey;margin:auto
}
(3)grid+ place-items
结合水平和垂直方法
<div class="div22"><p class="p22">块级元素利用grid+place-items垂直居中</p>
</div>
*{margin:0px;padding
}
.div22{width:90%;height:20%;border:10px solid red;display:grid;place-items:center;
}.p22{background-color:grey;
}
(4)table-cell+text-align+vertical-align
父元素:
display:table-cell;
text-align:center;
vertical-align:middle;
子元素:
display:inline-block;
(会被float、absolute属性破坏效果,同时margin没有效果)
<div class="div8"><p class="p8">块级元素table-cell+水平垂直居中</p>
</div>
*{margin:0px;padding:0px;
}
.div8{width:80%;height:200px;border:10px solid Brown ;display:table-cell;text-align:center;vertical-align:middle;
}
.p8{width:80%;background-color:grey;display:inline-block;
}
3.1定位
(1)absolute+translate+left+top
结合水平和垂直方法
<div class="div6"><p class="p6">块级元素absolute+translate+left+top水平垂直居中</p>
</div>
*{margin:0px;padding
}
.div22{width:90%;height:20%;border:10px solid red;display:grid;place-items:center;
}.p22{background-color:grey;
}
(2)absolute+负margin+left+top(定宽)
结合水平和垂直方法
<div class="div8"><p class="p8">块级元素absolute+负margin水平垂直居中</p>
</div>
*{margin:0px;padding
}
.div8{width:90%;height:200px;border:10px solid Brown ;position:relative;
}
.p8{width:200px;height:100px;background-color:grey;position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-50px;
}
相关文章:
【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中
【CSS】元素居中一、 水平居中1.行内元素水平居中(1)text-align2.块级元素水平居中2.1 margin(1)margin2.2布局(1)flex justify-content(推荐)(2) flexmargin…...
spring实现AOP
文章目录前言一、AOP的底层实现原理二、AOP的两种开发模式1.使用xml配置文件1.1 添加AOP依赖1.2 创建UserService1.3创建UserServiceImpl1.4创建通知类1.5 创建applicationContext.xml(添加aop约束)1.6 测试2.使用注解开发2.1 创建bean.xml文件配置注解方…...
neovim搭建cpp环境
文章目录Windowns下NeoVim搭建cpp环境NeoVim安装插件vim-plugindentLinevim-airlinectagstagbarcoc.vimWindowns下NeoVim搭建cpp环境 在开发过程中习惯在DIE环境中使用vim作为编辑器,在单独的编辑器也常使用gvim图形化编辑器。最近看到NeoVim的特性及兼容性方面不输…...
SpringBoot AES加密 PKCS7Padding 模式
AES 简介:DES 全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法,1977年被美国联邦政府的国家标准局确定为联邦资料处理标准(FIPS) AES 密码学中的高级加密标准(Advan…...
按键输入驱动
目录 一、硬件原理 二、添加设备树 1、创建pinctrl 2、创建节点 3、检查 编译复制 三、修改工程模板编辑 四、驱动编写 1、添加keyio函数 2、添加调用 3、驱动出口函数添加释放 4、添加原子操作 5、添加两个宏定义 6、初始化原始变量 7、打开操作 8、读操作 总体代…...
2023年第七周总周结 | 开学倒数第三周
为什么要做周总结? 1.避免跳相似的坑 2.客观了解上周学习进度并反思,制定可完成的下周规划 一、上周问题解决情况 晚上熬夜导致第二天学习状态不好 这周熬夜一天,晚上帮亲戚修手机到22:30,可能是晚上自己的事什么都没做ÿ…...
Springboot扫描注解类
Springboot扫描注解类的入口在AbstractApplicationContext的refresh中,对启动步骤不太了解的,可参考https://blog.csdn.net/leadseczgw01/article/details/128930925BeanDefinitionRegistryPostProcessor接口有多个实现类,扫描Controller、Se…...
Apache日志分析器
您的Apache HTTP服务器生成的日志数据是信息的宝库。使用这些信息,您可以判断您服务器的使用情况、找出漏洞所在,并设法改进服务器结构和整体性能。审核您的Apache日志可在以下情况派上用场,其中包括:识别和纠正频繁出现的错误以增…...
啪,还敢抛出异常
🙉 作者简介: 全栈领域新星创作者 ;天天被业务折腾得死去活来的同时依然保有对各项技术热忱的追求,把分享变成一种习惯,再小的帆也能远航。 🏡 个人主页:xiezhr的个人主页 前言 去年又重新刷了…...
Apache JMeter 5.5 下载安装以及设置中文教程
Apache JMeter 5.5 下载安装以及设置中文教程JMeter下载Apache JMeter 5.5配置环境变量查看配置JDK配置JMeter环境变量运行JMeter配置中文版一次性永久设置正文JMeter 下载Apache JMeter 5.5 官方网站:Apache JMeter 官网 版本介绍: 版本中一个是Bina…...
string类模拟实现
了解过string常用接口后,接下来的任务就是模拟实现string类。 目录 VS下的string结构 默认成员函数和简单接口 string结构 c_str()、size()、capacity()、clear()、swap() 构造函数 拷贝构造函数 赋值重载 析构函数 访问及遍历 容量操作 reserve resize …...
cadence SPB17.4 S032 - allegro - 保存/载入光绘层定义
文章目录cadence SPB17.4 S032 - allegro - 保存/载入光绘层定义概述保存光绘层在新板子中载入已经保存的相同类型老板子定义好的光绘层定义文件碎碎念ENDcadence SPB17.4 S032 - allegro - 保存/载入光绘层定义 概述 以前布线完成, 准备出板厂文件时, 总是要手工重新建立光绘…...
微服务实战--高级篇:分布式缓存 Redis
分布式缓存 – 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题: 1.Redis持久化 Redis有两种持久化方案: RDB持久化AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file(Redis数据备份文件)…...
【C语言】可变参数列表
本篇博客让我们来认识一下C语言学习过程中往往被忽略的可变参数列表 所谓可变参数,就是一个不限定参数数量的函数,我们可以往里面传入任意个数的参数,以达成某些目的。 关联:C11可变模板参数;本文首发于 慕雪的寒舍 …...
目标检测的旋框框文献学习
这是最近打算看完的文献,一天一篇 接下来将记录一下文献阅读笔记,避免过两天就忘了 RRPN 论文题目:Arbitrary-Oriented Scene Text Detection via Rotation Proposals 论文题目:通过旋转方案进行任意方向的场景文本检测&#x…...
Hive 在工作中的调优总结
总结了一下在以往工作中,对于Hive SQL调优的一些实际应用,是日常积累的一些优化技巧,如有出入,欢迎在评论区留言探讨~ EXPLAIN 查看执行计划 建表优化 分区 分区表基本操作,partitioned二级分区动态分区 分桶 分…...
每天一道大厂SQL题【Day09】充值日志SQL实战
每天一道大厂SQL题【Day09】充值日志SQL实战 大家好,我是Maynor。相信大家和我一样,都有一个大厂梦,作为一名资深大数据选手,深知SQL重要性,接下来我准备用100天时间,基于大数据岗面试中的经典SQL题&#…...
MATLAB 遗传算法
✅作者简介:人工智能专业本科在读,喜欢计算机与编程,写博客记录自己的学习历程。 🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心&…...
探讨 Java 中 valueOf 和 parseInt 的区别
前言 在编程中,遇到类型转换,好像会经常用到 parseInt 和 valueOf,当然这里只拿 Integer 类型进行陈述,其他类型也是雷同的; 想必有读者也跟我一样,经常交叉使用这两个方法,但却不知道这两者到…...
JSON学习笔记
♥课程链接:【狂神说Java】一小时掌握JSON_哔哩哔哩_bilibili配套的当然还要学习ajax不管是前端后端,感觉这部分内容是必须的,不然真的做项目的时候云里雾里。总体json的内容不多,具体就:1. 列表、对象等语法格式2. js…...
家政服务小程序实战教程07-轮播图组件
小程序中首页一般显示轮播图的功能,点击轮播图会跳转到具体的一篇文章或者是产品,本篇我们就介绍一下轮播图功能的开发 01 设计数据源 我们轮播图组件需要两个字段,一个是展示的图片,一个是跳转页面传入的参数。打开数据源&…...
MySQL之索引创建、删除、唯一索引、普通索引、及命名规则、注意事项
一、MySQL 索引 定义 索引是一个数据结构,用于加速数据库表中数据的查询。索引存储了一些数据表中的列值,以及这些列值在数据表中的位置,这样就可以通过索引来快速查找到数据表中的某一行数据。 MySQL 支持多种索引类型,包括普通…...
【C++设计模式】学习笔记(3):策略模式 Strategy
目录 简介动机(Motivation)模式定义结构(Structure)要点总结笔记结语简介 Hello! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专业,获得过国家奖学金…...
Java——聊聊JUC中的ThreadLocal
文章目录: 1.什么是ThreadLocal? 1.1 api介绍 1.2 最简单的案例认识ThreadLocal 1.3 线程池结合ThreadLocal案例 2.Thread &ThreadLocal & ThreadLocalMap 3.ThreadLocal内存泄漏问题 3.1 四大引用之强引用 3.2 四大引用之软引用 3.3 四…...
软件工程(4)--螺旋模型
前言 这是基于我所学习的软件工程课程总结的第四篇文章。 在软件开发过程中必须及时识别和分析风险,并且采取适当措施以消除或减少风险的危害。构建原型是一种能使某些类型的风险降至最低的方法。为了降低交付给用户的产品不能满足用户需要的风险,一种行…...
图解LeetCode——剑指 Offer 50. 第一个只出现一次的字符
一、题目 在字符串 s 中找出第一个只出现一次的字符。如果没有,返回一个单空格。 s 只包含小写字母。 二、示例 2.1> 示例 1: 【输入】s "abaccdeff" 【输出】b 2.2> 示例 2: 【输入】s "" 【输出】 限制: 0 < s 的…...
《HTML 5与CSS 3核心技法》读书笔记
目录前言第1章 写在前面第2章 HTML 语法基础第3章 布局类元素 ,房子的楼板、柱子和大梁第4章 功能类元素,房子的门、窗、水管和电气第5章 CSS基础第6章 选择器,确定样式的作用范围选择器类型选择器的组合使用第7章 权重,样式发送冲…...
【沐风老师】3DMAX几何投影插件Geometry Projection使用详解
【几何投影插件】 描述 3DMAX几何投影插件Geometry Projection,将一个或多个对象或它的顶点选择沿全局或局部 x、y 或 z 轴投影到另一个对象上。 适用版本 3dMax2013或更高版本 安装设置 插件的安装非常简单,解压后把插件脚本 “geometry_projectio…...
面试问题整理
20200422面试题 1、有nginx为什么还要用gateway 2、factorybean和beanfactory有什么区别 https://www.cnblogs.com/leeego-123/p/12159574.html 2、aop原理 3、ioc原理 4、注解requestbody和responsebody区别。pathvireable和requestparam注解区别,feign客户端的注解…...
“区块链60人”2022赋能中国区块链创新人物名单公布
2022年11月5日,“2022第五届全国高校人工智能大数据区块链教育教学创新论坛”在京隆重召开。此次论坛公布了“区块链60人”2022赋能中国区块链创新人物评选活动获评名单。 本次评选活动通过媒体报道、第三方推荐、专家评选等环节,坚持“公开、公平、公正…...
免备案做网站 可以盈利吗/专业做app软件开发公司
因为每个人二分的风格不同,所以在学习二分的时候总是被他们的风格搞晕。有的人二分风格是左闭右开也就是[L,R),有的人是左开右闭的(L,R]。 二分的最基本条件是,二分的序列需要有单调性。 下面介绍的时候用v来代表我们二分的目标,用…...
做外贸网站选美国服务器的费用/电商的运营模式有几种
过滤器的区别 捕捉过滤器(CaptureFilters):用于决定将什么样的信息记录在捕捉结果中。需要在开始捕捉前设置。显示过滤器(DisplayFilters):在捕捉结果中进行详细查找。他们可以在得到捕捉结果后随意修改。那…...
教做美食的网站/营销型网站内容
今天给大家列出一些代码,仅供参考列出数据层和逻辑层的代码WebPage类1using System; 2using System.Collections.Generic; 3using System.Text; 4using System.Web; 5using System.Web.SessionState; 6using System.Web.UI; 7using System.Web.UI.WebControls; 8usi…...
怎么用腾讯云主机建设网站/百度seo策略
MySQL数据库安装配置和启动 1,下载MySQL 打开MySQL的官网www.mysql.com,发现有一个DOWNLOADS 点击它,进入到MySQL的下载页面,在页面的底部有一个MySQL Community Edition, 并且下面有一个蓝色的链接 点击这个蓝色的链接…...
东莞最好的网站建设/太原竞价托管公司推荐
如果用nodejs做服务器,很多情况下,是需要自动重启功能的。比如:场景1、当文件被修改时自动重启服务器。这里的文件,可能是服务器主程序,比如修改了程序,也可以是其它依赖文件等。例程:两个文件&…...
大连工业大学专升本/seo网站关键词优化快速官网
第一篇稿子,也是激励自己的。...