网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮。除此之外,对于前端开发面试者的基础也是很好的一个考察点。下面跟着作者的思路,一起来看下吧。
场景分析
- 一个元素,它有可能有背景,那我要它的背景居中对齐
- 一个元素,它还有可能有个父级元素,那我要它居中于其父级元素
- 一个元素,它也有可能还带有一些子内容,我要让它的子内容居中
场景建模
根据场景分析提出的一些假设,我们试着去建立对应的模型,下面是分别根据上面的三个场景设计的相关模型。
- 搞父子元素居中对齐
- 搞元素背景居中对齐
- 搞元素内容居中对齐
场景实现
相关说明
为了统一,这里我们定义一个400*400px
的带着黑色边框粉红色身体的类名为.box
的父容器,它有可能会有一个200*200px
的带着原谅色身体的类名为.box-son
的子容器。这里为了效果能够直观且明显,笔者故意把背景图片的原始大小处理成小于宿主像素的大小。好吧,我们开始吧!
背景居中
我们做这样一件事,在一个div容器中,我们通过background-image
属性引入一张背景,之后我们期望这张引入的背景呢,它能够水平垂直居中于宿主元素。
这里介绍两个属性background-repeat
和background-position
,如果你初中英语好的话,我想你也应该知道了,这里字面意思就是这个属性的意思。一个是设置背景图片怎么铺宿主元素(默认时铺满的)更美丽的,另一个是设置背景图片相对于宿主元素的的位置,你可以传像素、百分比、相关方向单词(top、bottom、left、right)给它。当其为百分比的时候,它的计算公式如下:
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
简言之,就是宿主元素的宽高减去图片宽高乘以相关百分比就是相对于宿主元素左上角那个原点的位置。
在背景图片不重复的情况下,你想让一张图片居中于宿主元素的方法,可以有background-postion: center center
、background-postion: 50%, 50%
,也可以简写成background-postion: center
或者background-postion: 50%
所以,在楼上这些前提下,我们大致能够归出一个类,形如:
/** 这里以复杂写法的百分比为例, 分别代表距离宿主元素左上角的x和y轴的距离**/
.box-son {
background-repeat: no-repeat;
background-position: 50%, 50%;
}
文字内容居中
如果宿主元素的内容是文字之类的,我们期望它能够居中于宿主元素,这里用到两个属性,一个是text-align
,一个是line-height
。text-algin:center
可以使内容水平居中于宿主元素,将line-height
设置成宿主元素相同的高度,便可让宿主元素垂直居中。
相关例子链接:https://ataola.github.io/show/zj/center-middle.html#example11
子元素居中于父元素
相关说明
这里解释下,父相子绝,这个是我阉割了“父级元素相对定位,子级元素绝对定位”这句话浓缩后的叫法。后面出现这个概念我就不过多再进行重复介绍了。
父相子绝 + margin: auto
父元素相对定位子元素绝对定位后,设置其top、right、bottom、left
都为0,之后我们将其的margin
设置为auto
。这样子的话,父级元素与子级元素他们之间空出来的部分都会被这个margin
均匀撑开。
.box-position {
position: relative;
}
.box-example1 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
相关例子链接:https://ataola.github.io/show/zj/center-middle.html#example1
父相子绝 + 负值margin
父元素相对定位子元素绝对定位后,子元素设置top: 50%; left:50%;
,这里的百分比参考值是相对于父元素的宽高,参考的点是父元素的左上角和子元素的左上角,所以我们需要矫正一下,减去子元素宽高的一半。这件事可以让子元素的margin
代劳。
.box-position {
position: relative;
}
.box-example2 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
相关例子链接: https://ataola.github.io/show/zj/center-middle.html#example2
父相子绝 + 平移(translate)
在楼上那个例子的基础上,为了矫正子元素的偏移,我们其实还可以用css的平移属性。这个平移的百分比是相对于其本身的宽高的,所以是向反方向50%。
.box-position {
position: relative;
}
.box-example3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
相关例子链接:https://ataola.github.io/show/zj/center-middle.html#example3
父子double相(不推荐,做着玩玩的)
一个不成熟的做法哈,父子都是相对定位也还是可以勉强居中的,硬算嘛,这里没有太大价值就不展开了。
.box-position {
position: relative;
}
.box-example4 {
position: relative;
top: 90px;
left: 90px;
}
相关例子链接:https://ataola.github.io/show/zj/center-middle.html#example4
父子double相 + rem(不推荐,同楼上)
没有太大价值,略过。
相关例子链接: https://ataola.github.io/show/zj/center-middle.html#example5
父相子绝 + calc
calc这个css属性可以允许在声明css属性值时执行一些计算,回到我们之前的那个矫正偏移量的模型上,那么这里很容易想到子元素top、left
属性设置成50%减去子元素一半的这样一个模型。
.box-position {
position: relative;
}
.box-example6 {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
相关例子链接:https://ataola.github.io/show/zj/center-middle.html#example6
新旧flex
flex布局,但凡一个正经点的初面都会遇到的,因为它好用也很常用,这里介绍两种,一种是新版的flex布局的写法,一种是旧版的flex布局的写法
flex布局你就把它看成是一条轴线,一条长得还挺夯实的轴线,在这条轴线上,我们想要放一个盒子,有很多种放法,具体的可以搜下阮一峰老师的教程这里不再赘述。一个化繁为简的想法哈,这个是跟琦瑞哥学到的,就是我们很多时候也不一定能记得住那么多属性,我们期望做这样一件事,就是把它化抽象为形象。我们可以用具体的方位去表达我们的想法,简言之就是封装成一个类库,然后用一些接地气的类名去控制flex布局。
有兴趣的童鞋可以看下我实现的一个低配版的css样式库:https://ataola.github.io/show/box/assets/taolaui/flex.css
新版flex的写法
在不改变轴方向的情况下,其父元素设置align-items: center;
表示垂直居中,justify-content: center;
表示水平居中。
父元素设置:
.flex {
display: flex;
}
.flex-middle {
align-items: center;
}
.flex-center {
justify-content: center;
}
相关例子链接:https://ataola.github.io/show/zj/center-middle.html#example7
旧版flex的写法
这里就是提及一下有这么种存在,读者用新版的写法就好。
.box-old {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
相关例子链接:https://ataola.github.io/show/zj/center-middle.html#example8
table布局
父元素设置display: table
,子元素设置display:table-cell
,在只有一个子元素的情况下它会尽可能撑满父元素,多个子元素的情况下水平均分。设置vertical-align: middle
可以使得其内容垂直居中。
.box-table {
display: table;
}
.box-son-table {
display: table-cell;
vertical-align: middle;
}
相关例子链接:https://ataola.github.io/show/zj/center-middle.html#example9
grid布局
前面我们提到的flex布局时轴布局是一维的,这里的grid网格布局时二维的是平面的。将其父元素设置成display:grid
,然后子元素设置align-self: center;
表示垂直居中,justify-self: center;
表示水平居中。
.box-grid {
display: grid;
}
.box-son-grid {
align-self: center;
justify-self: center;
}
相关例子链接:https://ataola.github.io/show/zj/center-middle.html#example10
最后
相关实现地址已开源:https://ataola.github.io/show/zj/center-middle.html,若有不足之处,供批评指正!
其他网页设计基础总结:https://ataola.github.io/show/
参考文献
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
网页元素居中的n种方法的更多相关文章
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- CSS绝对定位元素居中的几种方法
转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...
- 元素居中的两种方法,transform和margin
1.transform :translate(-50%,-50%) <!DOCTYPE html> <html lang="en"> <head> ...
- jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
- Knockout获取数组元素索引的2种方法,在MVC中实现
原文:Knockout获取数组元素索引的2种方法,在MVC中实现 在遍历数组.集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法. 假设有这样的一个模型: namespa ...
- after及before伪元素及解决父元素塌陷的几种方法
一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...
- 【亲测显式等待】Selenium:元素等待的4种方法
Selenium:元素等待的4种方法 1.使用Thread.sleep(),这是最笨的方法,但有时候也能用到而且很实用. 2.隐式等待,隐性等待是指当要查找元素,而这个元素没有马上出现时,告诉We ...
- js中如何删除某个元素下面的所有子元素?(两种方法)
js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...
- Qt中的布局浅析与弹簧的使用,以及Qt居中的两种方法
1. 布局 为什么要布局: 布局之后窗口的排列是有序的 布局之后窗口的大小发生变化, 控件的大小也会对应变化 如果不对控件布局, 窗口显示出来之后有些控件的看不到的 布局是可以嵌套使用 常用的布局方式 ...
随机推荐
- iozone测试报错:Error writing block 12634, fd= 3 write: No space left on device
问题:使用iozone测试GFS的读写性能的时候,一直报错Error writing block 12634, fd= 3 write: No space left on device,百思不得其解: ...
- xcode搜索路径缩写
$(inherited) 这个$(inherited)可用于将构建设置从project级别继承到target级别.拿添加pod依赖遇到的问题来说就是,当前工程target级别没有继承项目级别的配置,所 ...
- tableView reloadData页面跳动问题
参考:https://www.jianshu.com/p/5f033fdd4ddb 一般情况下 if (@available(iOS 11.0, *)) { self.estimatedRowHeig ...
- Java通过循环结构和switch实现简易计算器
Java通过循环结构和switch实现简易计算器 可以循环计算,通过调用函数本身来实现重新计算 package com.shenxiaoyu.method; import java.util.Scan ...
- docker常用命令,及进入Tomcat的WebApps发布目录(就是进入docker容器后台目录)
docker常用命令,及进入Tomcat的WebApps发布目录(就是进入docker容器后台目录) 一.常用命令 1.显示所有的容器,包括未运行的 docker ps -a 2.启动容器.注 ...
- json字符串转List集合
public List<Map<String,PendingInfo>> jsonToList(String json){//PendingInfo可以换成其它bean类 Li ...
- 关于Java两点需要更新的知识
HashMap的初始容量 背景 很多人可以把HashMap的原理描述的很溜.比如JDK1.7之前,底层数据结构是数组+链表.JDK1.8之后,出于效率上的考虑,在数组长度大于64,链表长度大于8的时候 ...
- ngnix随笔四
1.alias path 例1. =>http://www.a.com/bbs/ root /data/vhosts/; location /bbs/{ alias /data/a.com/; ...
- [JavaWeb基础] 009.Struts2 上传文件
在web开发中,我们经常遇到要把文件上传下载的功能,这篇文章旨在指导大家完成文件上传功能 1.首先我们需要一个上传文件的页面. <!--在进行文件上传时,表单提交方式一定要是post的方式, 因 ...
- Spring_配置Bean & 属性配置细节
1.Spring容器 在 Spring IOC 容器读取 Bean 配置创建 Bean 实例之前, 必须对它进行实例化. 只有在容器实例化后, 才可以从 IOC 容器里获取 Bean 实例并使用.Sp ...