第147天:web前端开发中的各种居中总结
一、水平居中
方法① :行内元素 (父元素)text-align,(子元素)inline-block
.parent{text-align: center;}
.child{display: inline-block;}
优点:兼容性好,支持低版本浏览器
缺点:需要同时在父元素和子元素上设置
.child{width:200px;margin:0 auto;}
优点:兼容性好
缺点:需要指定宽度
前提:用于子元素上,不受float影响
方法③:(子元素)display:table;margin:0 auto;
.child{display:table;margin:0 auto;}
优点:只需要对自身进行设置
缺点:不兼容IE6和IE7
适用场景:子元素数量多,不方便修改父元素的属性,对浏览器版本要求相对较低时使用
方法④:绝对定位实现 (父元素)position:relative,(子元素)absolute+left+transform(translateX(-50%))
.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}
方法⑤:flex+justify-content/margin
/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;}
第一种方法:
第二种方法:
二、垂直居中
方法① :单行文本 设置line-height等于父元素高度
.child{ height:20px; line-height:20px}
.child{display:inline-block; vertical-align:middle}
.parent:after{display:inline-block; vertical-align:middle}
方法③ :块级元素 使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;
/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
/*第一种方法*/
.parent{display:table}
.child{display:table-cell;vertical-align:middle;}
.parent{position:relative;} .child{positon:absolute;top:50%;transform:translate(0,-50%);}
方法⑤:使用flex实现方法 (父)flex + align-items
.parent{display:flex;align-items:center;}
三、【终极需求】水平垂直同时居中!
方法①:元素高度固定
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*宽度;}
适用于所有浏览器
方法②:元素高度固定
.parent{position:relative;}
.child{position:absolute;width:固定;height:固定;top:;left:;right:;
bottom:;margin:auto
}
适用于所有浏览器
方法③:(父)text-align + table-cell + vertical-align,(子)inline-block(兼容性方案)
.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}
方法④:使用绝对定位
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.parent{display:flex;justify-content:center;align-items:center;}
第147天:web前端开发中的各种居中总结的更多相关文章
- web前端开发中的各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- WEB前端开发中的图片压缩
web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...
- Web前端开发中的MCRV模式(转)
作者: izujian 来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...
- Web前端开发中的小错误
Web前端开发中的小错误 错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:log ...
- web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
- px em rem在WEB前端开发中的区别
我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...
- web前端开发中的浏览器兼容性总结
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
- WEB前端开发中的SEO注意点
近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写 ...
- web前端开发中Nodejs、Grunt、npm等的介绍、使用
一.Nodejs的安装: Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧.去 https://nodejs.org/ 上,点击页面中那个绿色.大 ...
随机推荐
- 20155331 实验四 Android开发基础
20155331丹增旦达实验四报告 实验四 Android程序设计-1 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java ...
- 20145209 实验一《Java开发环境的熟悉》实验报告
20145209 实验一<Java开发环境的熟悉>实验报告 实验内容 1.使用JDK编译.运行简单的Java程序. 2.使用Eclipse 编辑.编译.运行.调试Java程序. 提交 Li ...
- POJ2513_Colored Sticks_KEY
题目传送门 题目大意:给你若干根木棍,每根木棍有前后两种颜色,连接两根木棍需要前后颜色相同,求能否将所有木棍连接在一起. Solution: 不要将木棍看成点,将颜色看成点. 其实就是求是否存在欧拉路 ...
- PostgreSQL参数学习:vacuum_defer_clean_age
官方文档: http://www.postgresql.org/docs/9.3/static/runtime-config-replication.html 为了防止slave端读取数据时,因为读到 ...
- SPOJ 694&&SPOJ705: Distinct Substrings
DISUBSTR - Distinct Substrings 链接 题意: 询问有多少不同的子串. 思路: 后缀数组或者SAM. 首先求出后缀数组,然后从对于一个后缀,它有n-sa[i]-1个前缀,其 ...
- 四、Django设置相关
1.全局设置 setttings文件 import os import sys # Build paths inside the project like this: os.path.join(BAS ...
- Unity Lighting - Light Probes 光照探针(十)
Light Probes 光照探针 Only static objects are considered by Unity’s Baked or Precomputed Realtime GI s ...
- JY播放器【网易云音乐破解下载】
今天给大家带来一款神器----JY播放器.可以直接下载网易云音乐的歌曲. 目前已经支持平台(蜻蜓FM.喜马拉雅FM.网易云音乐.QQ音乐) 使用方法: 在电脑打开网易云音乐或者网站找到你要听的歌曲或歌 ...
- Nginx之一:Nginx的编译安装
一.Nginx简介 官方网址:http://nginx.org/ Nginx是由1994年毕业于俄罗斯国立莫斯科鲍曼科技大学的同学为俄罗斯rambler.ru公司开发的,开发工作最早从2002年开始, ...
- CSP201312-3:最大的矩形
引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...