居中到底有多少种方法
前言
居中可以说是网页布局中非常常见的布局了,垂直居中,水平居中,其中又分为块级元素和行内元素,没有系统的整理过还真有点搞不清楚。来看看各式各样的居中到底有多少种。
水平居中
行内元素水平居中
行内元素水平居中最常见的场景就是文字居中,最常用的就是对其父元素设置 text-align:center
,这个方法对一下几种元素都有效:
- display:inline
- display:inline-block、
- display:inline-table
- display:inline-flex
<div class="parent"><a>我的博客</a></div>
.parent{text-align:center;}
块级元素水平居中
1.设为行内元素使用居中
看完行内元素居中我们很容易就会想到,可以将块级元素手动设置为行内元素,再使用text-align:center
居中
<div class="parent"><div class="child">还是我的博客</div></div>
.parent {text-align: center;
}
.child {display: inline;background-color: red;color: white;
}
当然如果有对元素设置宽高的需求的话设置 display:inline-block
即可
2. 使用左右 margin:auto
通过将块状元素的左右 margin 设置为 auto 可以使左右 margin 平分所剩下的空间,得到的效果自然就是元素水平居中了,不过前提是块状元素需要设置好宽度
<div class="child"></div>>
.child {width: 100px;height: 50px;margin: 0 auto;background-color: blue;
}
通过控制台查看布局可以看到,蓝色元素左右被等宽的 margin 占据。
这种方式更合适元素独占一行的情况,因为都被 margin 占满了无法再添加其他元素了。
3.使用table+margin
使块级元素获得宽度除手动设置 width 之外,还可以通过设置 display: table
。此时元素宽度为内容宽度,所以块状元素内部需要有内容,不然就会坍塌不见。同样占据一整行。
<div class="child">我的博客</div>>
.child {display: table;margin: 0 auto;background-color: blue;color: white;
}
4.使用absolute+transform
先将父元素设置为相对定位,对子元素使用绝对定位,让子元素向右移动父元素宽度的一般,然后向左移动子元素自己宽度的一般
<div class="parent"><div class="child">我的博客</div></div>
.parent {position: relative;
}
.child {background-color: blue;color: white;left: 50%; // left 设置百分比即为父元素宽度的百分比transform: translateX(-50%); //translateX 百分比是自己宽度的百分比position: absolute;
}
这样设置的元素是脱离正常文档流的,不影响其他元素布局。但是有比较少的浏览器不支持设置 transform 属性。
5.使用flex+justify-content
这也是我使用的最多的一种居中方式了,通过使用 flex 布局 方式可以很轻松的实现水平居中,设置 justify-content: center;
即可实现子元素水平居中排列,其中 justify-content 用于设置弹性盒子元素在主轴(默认横轴)方向上的对齐方式
<div class="parent"><div class="child">我的博客</div></div>
.parent {display: flex;justify-content: center;
}
.child {background-color: blue;color: white;
}
可以看到我们并没有设置子元素的宽度,在 flex 布局下 div 宽度自动收缩到了内容宽度,效果和使用 display: table
一样,这时同样可以通过设置 margin:0 auto
居中,但是这明显不是我们使用 flex 布局的初衷。通过使用 flex 布局元素无需脱离正常文档流,无需独占一行。当然不可避免的会有一小部分浏览器不兼容。
6. 利用绝对定位元素自动伸缩
代码如下:
<div class="parent"><div class="child"></div></div>
.parent {position: relative;
}
.child {position: absolute; /*绝对定位*/width: 200px;height: 100px;background: blue;margin: 0 auto; /*水平居中*/left: 0; /*此处不能省略,且为0*/right: 0; /*此处不能省略,且为0*/
}
多块级元素水平居中
1.使用 flex 布局
利用弹性布局(flex),同样可以实现多块级元素水平居中。
<div class="parent"><div class="child">我的博客</div><div class="child">我的博客</div><div class="child">我的博客</div></div>
.parent {display: flex;justify-content: center;
}
.child {background-color: blue;color: white;margin-left: 10px;// 只是为了分离开元素
}
2. 利用inline-block
将要水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align:center,达到与上面的行内元素的水平居中一样的效果。
<div class="parent"><div class="child">我的博客</div><div class="child">我的博客</div><div class="child">我的博客</div></div>
.parent {
text-align: center;
}
.child {background-color: blue;color: white;margin-left: 10px;display: inline-block;
}
浮动元素水平居中
1. 定宽的非浮动元素通过设置 relative + 负margin,
原理见下图:
<div class="parent"><div class="child">我的博客</div></div>
.child {background-color: blue;width: 100px;height: 50px;position: relative;left: 50%;margin-left: -50px;
}
注意:样式设置在浮动元素本身,父元素无需设置
2.不定宽的浮动元素通过父子容器都相对定位居中
<div class="parent"><div class="child"></div></div>
.parent {float: left;position: relative;left: 50%;
}
.child {background-color: blue;width: 100px;height: 50px;float: left;position: relative;right: 50%;
}
可以看到 父元素组件也是偏移了位置的
3. 使用 flex 布局
flex 布局,强。这里就不赘述了,使用方法同上面一样
垂直居中
行内元素垂直居中
1. line-height = height
让父元素行高等于高度即可实现行内元素垂直居中
<div class="parent"><a class="child">我的博客</p></div>
.parent {background-color: red;color: white;height: 120px;line-height: 120px;
}
.child {}
效果截图:
2. 利用表布局(table)
使用表布局的 vertical-align: middle
也可实现垂直居中
.parent {background-color: red;display: table;height: 140px;
}
.child {display: table-cell;vertical-align: middle;
}
块级元素垂直居中
1. absolute+负margin
在已知高度的情况下,可以使用 top:50%
让元素距离顶部为父元素高度的一半,然后使用 -margin
使元素向上位移自身高度的一一半,原理其实和上文水平居中里一种一样的
<div class="parent"><div class="child"></div></div>
.parent {position: relative;background-color: antiquewhite;height: 200px;
}
.child {background-color: beige;position: absolute;top: 50%;height: 100px;width: 200px;margin-top: -50px;
}
通过这种思想很容易想出另外一种方法,那就是使用 transform
使元素位移,原理是一模一样的,就不单独列出。
2.使用flex+align-items
使用 flex 布局,通过设置父元素的 align-items
实现子元素的垂直居中
<div class="parent"><div class="child"></div></div>
.parent {background-color: antiquewhite;height: 200px;// 父元素必须有高度才能实现垂直居中display: flex;align-items: center;
}
.child {background-color: beige;height: 100px;width: 200px;
}
这个方法对行内元素同样有限,将
改为
我的博客
水平垂直居中
1.Flex 布局
水平垂直居中就是组合使用 水平居中与垂直居中,不过要说最方便的还是使用 flex 布局
<div class="parent"><div class="child"></div></div>
.parent {background-color: antiquewhite;height: 200px;// 父元素必须有高度才能实现垂直居中display: flex;align-items: center; // 垂直居中justify-content: center; // 水平居中
}
.child {background-color: beige;height: 100px;width: 200px;
}
2.margin:auto
容器元素设为 flex 布局或是 grid 布局,子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。
.parent {background-color: antiquewhite;height: 200px;display: grid;
}
.child {background-color: beige;height: 100px;width: 200px;margin: auto;
}
和 flex 布局有所不同的是可以看到父元素被 margin 填满了
总结
各种各样的居中方案一数竟然有差不多二十种,在实际开发中当然不会用到这么多,就我自己而言使用得最多的还是 margin:auto
和 flex 布局,研究这么多的目的知识为了更加熟悉 CSS 的一些特性,比如 -margin-left
是让元素左移,而 -margin-right
则会让元素右边的元素唯一,元素本身保持不动。这个特性不去研究我还真不知道。还有可以看到最方便的 flex 布局不支持比较老的浏览器,兼容性有一定问题,但是我想说的是除非你是搭建政府网站,其实没必要去考虑兼容 IE6 这种老古董了。兼容没必要矫正过往,这只会恶心到自己。
参考文章
- 如何居中一个元素(终结版)(部分图片摘自于此)
- Can I use
- Flex 布局教程--阮一峰
- 如何居中一个元素 (正常、绝对定位、浮动元素)
- 这15种CSS居中的方式,你都用过哪几种?
居中到底有多少种方法相关推荐
- 点到曲线的距离公式_推导点到直线的距离公式到底有多少种方法?
[总结]方程思想,这也是解析几何的主题思想,几何问题代数化,转化为代数计算. 优点:思路简单清晰易于理解. 缺点:计算量较大. [总结]此方法优点:计算量大幅度减小,紧扣问题入手,切入点准确. 缺点: ...
- _Linux结束进程到底有多少种方法?
请关注本头条号,每天坚持更新原创干货技术文章. 如需学习视频,请在微信搜索公众号"智传网优"直接开始自助视频学习. 1. 前言 我们经常在Linux里使用kill命令来结束某后台进 ...
- linux QT 结束当前进程_Linux结束进程到底有多少种方法?
请关注本头条号,每天坚持更新原创干货技术文章. 如需学习视频,请在微信搜索公众号"智传网优"直接开始自助视频学习. 1. 前言 我们经常在Linux里使用kill命令来结束某后台进 ...
- 正方形分成16份,将1到16填入其中。让行和列都是从大到小。问一共有多少种方法?...
看了到面试题: 将正方形分成16份,将1到16填入其中.让行和列都是从大到小.问一共有多少种方法? 此题 解法有: 1. 穷举,基本不用考虑 复杂度O(16!). 2. 枚举+剪枝 .代码如下:得到答 ...
- 一个简单的线性拟合问题,到底有多少种做法
一个简单的线性拟合问题,到底有多少种做法 相信大家都做过线性拟合问题吧,其实就是给很多点,来求线性方程的斜率和截距.早在高中数学就有这类问题,我记得很清楚,如果出现在试卷中,一般出现在解答题的第二题左 ...
- ads design environment_ADS应用技巧3 — 画一个巴伦有多少种方法?
为什么ADS的Schematic不允许多任务仿真(即如果一个Schematic的仿真任务没完成,就不允许任何Schematic启动新的仿真):而Layout却允许同时运行一大堆EM仿真. 按理说,Sc ...
- 从19本书中选取五本,并且要求这五本互相不相邻,一共有多少种方法?
题目: 从19本书中选取五本,并且要求这五本互相不相邻,一共有多少种方法? 解决方案一:挡板问题--插空法 假设当前在书架上已经放好14本书,那么只需要再把剩下五本书插入这些空中即可. 14本书有15 ...
- Markdown——图片、文字显示居中的一种方法
Markdown--图片.文字显示居中的一种方法 一.方法 1.1 图片居中 1.2 文字居中 二.图片居中举例 2.1 编辑界面 2.2 显示界面 一.方法 1.1 图片居中 在图片下面的链接的最后 ...
- 相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法
相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法 一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
最新文章
- d06调试详细说明_D06电脑板调试软件使用说明_20100706
- mysql数据库高级查询笔记_MySQL数据库基础——高级查询
- 博客园升级有感一点建议
- 深度学习在商户挂牌语义理解的实践
- 例解 autoconf 和 automake 生成 Makefile 文件[转+个人修改]
- 中国 AI 开发者真实现状:写代码这条路,会走多久?
- malloc(): corrupted top size
- 谷歌服务器框架最新版本,谷歌服务框架2020最新版本
- 分集阶数(diversity order)
- 大数据工具和数据库区别和关联
- sata port multiplier
- 用牛顿迭代法求方程的根
- 《Lynda.com XML 必备教程》(Lynda.com XML Essential Training)CFE 教程
- 抓包工具-Charles
- 基于ArrayList实现HashMap代码
- css之 vertical-align用法详解
- anacond清华源 mac_Anaconda更换清华源、中科大源
- python 解压zip密码正确但解压失败,Python实现加密的ZIP文件解压(密码已知
- 【毕设记录】Stata筛选控制变量
- IEEE 802.1Qav 协议笔记
热门文章
- Consul启动报错Unknown extra arguments
- audio标签控制音量_audio标签HTML5音乐播放器
- Html5+APICloud插件支持IOS和安卓原生APP开发
- oracle dcd设置,i.MX RT启动数据DCD的结构及配置
- openwrt (三)入门FAQ
- 计算机跨学科 自然科学基金资助率,求国家自然科学基金摘要 - 基金申请 - 小木虫 - 学术 科研 互动社区...
- Leaf中的Marker cluster
- WebSocket在线测试
- python爬取有道翻译的代码_使用python2爬取有道翻译
- DBeaver中Oracle连接使用socks代理