css图片居中_网页元素居中的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
css图片居中_网页元素居中的n种方法相关推荐
- css布局方式_网页布局都有哪种?一般都用什么布局?
随着Web技术不断的革新,CSS近几年也变得多年前要更强大.在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的 ...
- 很不错的JS+CSS滑动门_网页代码站(www.webdm.cn)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 摘自人民网体育频道的JS卷角翻转方块图片切换_网页代码站(www.webdm.cn)
1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
- php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现 1.1 html代码 div change width by drag div change width by drag 1.2 js代码 var eleLeft = $('#myDiv ...
- 让div在屏幕中居中(水平居中+垂直居中)的几种方法
这里是修真院前端小课堂,本篇分析的主题是 [让div在屏幕中居中(水平居中+垂直居中)的几种方法] 水平居中方法: 1.inline,inline-block元素的水平居中,在父级块级元素中设置tex ...
- 图片怎么压缩图片大小_图片的体积怎么压缩?这三种方法你会吗?
图片是我们在工作中经常要使用到的东西,在平时使用图片的时候相信大家都遇到过由于系统限制图片大小导致自己的图片无法上传的情况,这时候就需要对图片进行压缩了,把图片的体积降低到符合系统要求的大小,然后再进 ...
- css如何设置透明度?设置透明度的两种方法(代码实例)
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
- 网页转exe的三种方法
网页转exe的三种方法 前言:最近公司有个项目需要将几个子系统嵌入到一个大的系统中去,嵌入的要求是必须得是exe程序,但是有几个子系统是基于web运行的,所以需要找到将web项目转化为exe的方法.结 ...
最新文章
- uva 10491 Cows and Cars
- centos上安装anaconda并配置虚拟环境
- 业界真的需要水下数据中心?微软的确认为如此
- Web UI 制作规范
- 计算机网络流量图阅读与理解,计算机网络流量监控的设计与实现
- linux apache 多域名配置,apache-2.4.12基于域名访问的多虚拟主机配置
- 经典案例 | I-SPY2乳腺癌药物临床试验采用RPPA技术建立药物响应相关分子分型
- java课程设计报告书_java课程设计报告书模板
- C++题解:矩阵快速幂 求 斐波那契数列
- 数据结构与算法分析(排序,递归,链表)
- 博饼游戏奖项积分设置
- python背景透明_Python生成透明背景图片
- (完全解决)argparse中dest是什么意思
- unity探索者之Shader Graph所有节点详解-Input篇
- stl如果开o2_Flow-3D地形模型处理
- OracleLinux 6.4挂载NTFS盘的方法
- 明日之后服务器崩了最新消息,《明日之后》崩了是什么原因?明日之后崩了怎么登陆服务器...
- 组合数学(洛谷P5148)
- 计算机网络技术网络建设小结,计算机网络精品课程建设总结报告.doc
- 【区块链】NFT简单介绍(以BAYC为例)
热门文章
- JAVA调用NuSoap服务
- Wordpress 2.91 的一些良好改进
- 路由器-路由器以及×××-Client之间的×××
- 华为机试HJ57:高精度整数加法
- OpenCV-绘制箭头cv::arrowedLine
- 做任务云闪付为什么要实名认证_ISO9001质量体系认证:为什么要做?如何去做?...
- java jwks_OIDC中JWK,JWKS的介绍与使用
- member.php?mod=register文件在哪里,DEDECMS修改member会员中心文件夹名称 更改member目录名称...
- c语言程序设计形考任务2答案(DOC),C语言程序设计形考任务2.doc
- 性能测试很难吗?一文带你学会性能测试核心流程和概念